Animated drop zone with drag-over glow, queued file thumbnails, per-file progress bars that auto-fill, and a successful-state checkmark. Click "Browse" or drop files anywhere on the zone.
1function App() {
2 const [items, setItems] = React.useState([
3 {
4 id: 1,
5 name: "design-system.fig",
6 size: "12.4 MB",
7 kind: "figma",
8 progress: 100,
9 done: true,
10 },
11 {
12 id: 2,
13 name: "brand-guidelines.pdf",
14 size: "3.1 MB",
15 kind: "pdf",
16 progress: 64,
17 done: false,
18 },
19 {
20 id: 3,
21 name: "hero-mockup.png",
22 size: "1.8 MB",
23 kind: "image",
24 progress: 22,
25 done: false,
26 },
27 ]);
28 const [dragOver, setDragOver] = React.useState(false);
29 const seq = React.useRef(items.length);
30
31 React.useEffect(() => {
32 const t = setInterval(() => {
33 setItems((cur) =>
34 cur.map((it) =>
35 it.done
36 ? it
37 : {
38 ...it,
39 progress: Math.min(100, it.progress + 6),
40 done: it.progress + 6 >= 100,
41 },
42 ),
43 );
44 }, 220);
45 return () => clearInterval(t);
46 }, []);
47
48 const drop = () => {
49 setDragOver(false);
50 seq.current += 1;
51 const id = seq.current;
52 setItems((cur) =>
53 [
54 {
55 id,
56 name: `screenshot-${id}.png`,
57 size: "0.9 MB",
58 kind: "image",
59 progress: 0,
60 done: false,
61 },
62 ...cur,
63 ].slice(0, 5),
64 );
65 };
66
67 const ICONS = {
68 figma: {
69 tint: "#f472b6",
70 d: "M9 8h6m-6 4h6m-3 4h.01M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z",
71 },
72 pdf: {
73 tint: "#fbbf24",
74 d: "M9 13h6m-3-3v6m5 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z",
75 },
76 image: {
77 tint: "#22d3ee",
78 d: "M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z",
79 },
80 };
81
82 return (
83 <section className="up-stage min-h-screen flex items-center justify-center px-4 py-12 relative overflow-hidden">
84 <span className="up-orb orb-a" />
85 <span className="up-orb orb-b" />
86
87 <div className="relative w-full max-w-2xl">
88 <header className="text-center mb-7">
89 <span className="inline-flex items-center gap-2 px-3 py-1 rounded-full text-[11px] font-bold uppercase tracking-[0.18em] mb-4 up-pill">
90 Asset upload
91 </span>
92 <h2
93 className="text-white font-bold leading-tight tracking-tight"
94 style={{ fontSize: "clamp(1.5rem, 3vw, 2rem)" }}
95 >
96 Drop your design files
97 </h2>
98 <p className="text-slate-300/70 text-[13px] mt-2 max-w-md mx-auto">
99 PNG, JPG, PDF, FIG up to 50 MB each. Drag the entire zone or click to
100 browse.
101 </p>
102 </header>
103
104 <div
105 className={`up-zone ${dragOver ? "is-over" : ""}`}
106 onDragOver={(e) => {
107 e.preventDefault();
108 setDragOver(true);
109 }}
110 onDragLeave={() => setDragOver(false)}
111 onDrop={(e) => {
112 e.preventDefault();
113 drop();
114 }}
115 >
116 <span className="up-zone-glow" aria-hidden="true" />
117 <div className="relative flex flex-col items-center text-center">
118 <span className="up-cloud">
119 <svg
120 className="w-7 h-7"
121 viewBox="0 0 24 24"
122 fill="none"
123 stroke="currentColor"
124 strokeWidth={1.6}
125 >
126 <path
127 strokeLinecap="round"
128 strokeLinejoin="round"
129 d="M7 16a4 4 0 01-.88-7.903A5 5 0 0115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12"
130 />
131 </svg>
132 </span>
133 <p className="text-white font-semibold text-[15px] mt-3">
134 Drop files to upload
135 </p>
136 <p className="text-slate-300/65 text-[12px] mt-1 mb-4">
137 or{" "}
138 <button type="button" onClick={drop} className="up-browse">
139 browse from your computer
140 </button>
141 </p>
142 <div className="up-formats flex items-center gap-2 flex-wrap justify-center text-[10px] font-semibold uppercase tracking-[0.12em] text-slate-400">
143 <span>PNG</span>
144 <span className="opacity-30">·</span>
145 <span>JPG</span>
146 <span className="opacity-30">·</span>
147 <span>PDF</span>
148 <span className="opacity-30">·</span>
149 <span>FIG</span>
150 <span className="opacity-30">·</span>
151 <span>50 MB max</span>
152 </div>
153 </div>
154 </div>
155
156 {items.length > 0 && (
157 <ul className="mt-5 space-y-2.5">
158 {items.map((it) => {
159 const icon = ICONS[it.kind] ?? ICONS.image;
160 return (
161 <li key={it.id} className="up-item">
162 <span
163 className="up-item-icon"
164 style={{
165 background: icon.tint + "22",
166 color: icon.tint,
167 borderColor: icon.tint + "55",
168 }}
169 >
170 <svg
171 className="w-4 h-4"
172 viewBox="0 0 24 24"
173 fill="none"
174 stroke="currentColor"
175 strokeWidth={1.8}
176 >
177 <path strokeLinecap="round" strokeLinejoin="round" d={icon.d} />
178 </svg>
179 </span>
180 <div className="min-w-0 flex-1">
181 <div className="flex items-baseline justify-between gap-2">
182 <p className="text-white text-[13px] font-semibold truncate">
183 {it.name}
184 </p>
185 <p className="text-slate-400 text-[11px] font-medium tabular-nums flex-shrink-0">
186 {it.done ? it.size : `${it.progress}% · ${it.size}`}
187 </p>
188 </div>
189 <div className="up-track mt-1.5">
190 <span
191 className="up-fill"
192 style={{ width: `${it.progress}%`, "--tint": icon.tint }}
193 />
194 </div>
195 </div>
196 <span className={`up-status ${it.done ? "is-done" : ""}`}>
197 {it.done ? (
198 <svg
199 className="w-3.5 h-3.5"
200 viewBox="0 0 24 24"
201 fill="none"
202 stroke="currentColor"
203 strokeWidth={3}
204 >
205 <path
206 strokeLinecap="round"
207 strokeLinejoin="round"
208 d="M5 13l4 4L19 7"
209 />
210 </svg>
211 ) : (
212 <svg
213 className="w-3.5 h-3.5 animate-spin"
214 viewBox="0 0 24 24"
215 fill="none"
216 stroke="currentColor"
217 strokeWidth={2.4}
218 >
219 <path
220 strokeLinecap="round"
221 d="M12 2v4m0 12v4m10-10h-4M6 12H2m15.07-7.07l-2.83 2.83M8.76 15.24l-2.83 2.83m12.14 0l-2.83-2.83M8.76 8.76L5.93 5.93"
222 />
223 </svg>
224 )}
225 </span>
226 </li>
227 );
228 })}
229 </ul>
230 )}
231 </div>
232 </section>
233 );
234}
Three-step onboarding wizard with an animated progress bar, slide-fade panel transitions and contextual hints. Forward / back nav and completion celebration.
Three-plan pricing layout with a monthly/yearly toggle. Price values cross-fade with a slide animation, popular plan glows, yearly savings banner.
Interactive React stats panel on an aurora gradient. Click to randomise the three live counters — each animates a pulse ring driven by custom CSS keyframes, with hover glow on the card edges.
Click the trigger — a success modal animates in with a pure-CSS confetti burst. Modal eases up, confetti pieces fall from above the viewport.
Floating action button that fans out four sub-actions in a radial arc on click. Tap rotates the plus icon to a close icon; each action chip eases in.
Profile skill panel where each progress bar fills from 0 to its value with an eased animation. Each bar's gradient is tinted to match the skill level.
Hundreds of production-ready Bootstrap 5 snippets — cards, navbars, dashboards, pricing tables, modals. Live preview, one-click HTML download with the CDN pre-wired, MIT licensed.
519
Snippets
2629.2k
Views
86.2k
Downloads
Card Grid Layout
Comments(0)
No comments yet — be the first to start the discussion.
Sign in to join the conversation.