这一层只收录带 React 的动画组件：每一件都在沙箱里真实运行，附带可直接粘进 Cursor / Claude Code / v0 的 AI Prompt，复制即可在你的React项目里 1:1 还原。
Five stars light up on hover with spring scale on the previewed one; clicking locks the rating and label.
Spring-in glass toasts (success/info/warn) slide in from the bottom-right, auto-dismiss with slide-out, closable.
An account dropdown whose items cascade in with a staggered rise, closing on outside click. Rendered in the Crimson Heat palette.
Fire success, info and warning toasts that slide in, stack up and auto-dismiss with a timer bar. Rendered in the Mono Pearl palette.
Signup fields validate as you type: green check borders, rule hints, shake on bad submit, success flare. Rendered in the Deep Indigo palette.
An account dropdown whose items cascade in with a staggered rise, closing on outside click. Rendered in the Ultra Violet palette.
Tabs with a gradient pill indicator that slides and resizes to the active tab, content cross-fading. Rendered in the Ocean Sky palette.
Analytics KPI tile: pulsing status dot, counting number, delta chip and a live-updating sparkline. Rendered in the Rose Gold palette.
Frosted stat cards that lift on hover while a soft light pool tracks the cursor along their top edge.
Pill toggle switches prices between monthly and yearly (-20%) with a number roll transition; middle plan highlighted.
Live strength scoring (length, case, digits, symbols) driving a colored gradient bar with missing-rule hints.
Signup fields validate as you type: green check borders, rule hints, shake on bad submit, success flare. Rendered in the Rose Gold palette.
A pointer-tracked 3D card: it tilts toward the cursor while a glossy glare sweeps across. Rendered in the Cyber Lime palette.
A confirmation modal that springs in over a blurred overlay and closes on backdrop or Esc. Rendered in the Cyber Lime palette.
An analytics stat card whose headline number rolls up on load beside a tiny SVG sparkline. Rendered in the Deep Indigo palette.
A creator profile card: gradient avatar ring, stats row and a follow button that toggles. Rendered in the Aurora Teal palette.
A two-step product tour: dimmed veil with a glowing cutout ring snaps to each target, tooltip advances. Rendered in the Mint Breeze palette.
An account dropdown whose items cascade in with a staggered rise, closing on outside click. Rendered in the Candy Pink palette.
An analytics stat card whose headline number rolls up on load beside a tiny SVG sparkline. Rendered in the Ultra Violet palette.
A semicircle SVG gauge that sweeps to its value on load, counts the % up, color-shifting by zone. Rendered in the Crimson Heat palette.
A music-player card: spinning artwork disc, play/pause morph, live progress and bouncing equalizer bars. Rendered in the Candy Pink palette.
Soft white ripples expand from the exact click point on a gradient pill, animating size and fade then self-removing.
A seamless infinite marquee of brand chips that slows on hover — duplicated for the loop. Rendered in the Aurora Teal palette.
A two-step product tour: dimmed veil with a glowing cutout ring snaps to each target, tooltip advances. Rendered in the Sunset Amber palette.
A frosted-glass pricing card with a popular ribbon, feature checklist and gradient CTA. Rendered in the Candy Pink palette.
A chat mock: user bubble lands, three-dot typing indicator breathes, then the AI answer types itself in. Rendered in the Ocean Sky palette.
Gradient underline grows from the left on hover while the label brightens — one-pseudo-element nav polish.
A donut chart whose arcs draw themselves on load; hovering a legend row lifts the matching slice. Rendered in the Rose Gold palette.
An account dropdown whose items cascade in with a staggered rise, closing on outside click. Rendered in the Aurora Teal palette.
Action blobs merge and separate like liquid as they fan out — the classic SVG goo (gaussian blur + colormatrix) menu.
Monospace page numbers with a gradient underline that sweeps in on hover and active state dot.
E-commerce product carousel with zoom hint, dot nav and price chip.
A creator profile card: gradient avatar ring, stats row and a follow button that toggles. Rendered in the Crimson Heat palette.
An account dropdown whose items cascade in with a staggered rise, closing on outside click. Rendered in the Royal Gold palette.
A music-player card: spinning artwork disc, play/pause morph, live progress and bouncing equalizer bars. Rendered in the Ultra Violet palette.
An analytics stat card whose headline number rolls up on load beside a tiny SVG sparkline. Rendered in the Mono Pearl palette.
A pointer-tracked 3D card: it tilts toward the cursor while a glossy glare sweeps across. Rendered in the Aurora Teal palette.
A music-player card: spinning artwork disc, play/pause morph, live progress and bouncing equalizer bars. Rendered in the Royal Gold palette.
Frosted-glass sticky navbar with a sliding active pill, mobile menu and user avatar cluster.
Accessible settings modal with focus trap, esc-to-close, backdrop blur and segmented controls.
Touch-friendly image carousel with snap scrolling, progress dots and edge fade masks.
4-step wizard indicator: numbered nodes light up with gradient borders as the fill bar advances.
FAQ accordion animating height and icon rotation, with one-open-at-a-time behaviour.
Tab bar with animated underline that slides to the active tab and keyboard roving.
Sortable data table with column toggles, striped hover rows and a compact pagination footer.
Rich profile card with cover gradient, avatar ring, bio, stats row and follow button.
A FAQ accordion with buttery height animation using the grid-rows trick and rotated chevrons. Rendered in the Rose Gold palette.
A frosted-glass pricing card with a popular ribbon, feature checklist and gradient CTA. Rendered in the Royal Gold palette.
Messenger panel with bubble groups, typing indicator and quick-reply chips.
Tabs with a gradient pill indicator that slides and resizes to the active tab, content cross-fading. Rendered in the Mint Breeze palette.
Three-column kanban board with drag ghost, hover insert line and column counters.
Split login card with brand panel, social sign-in, password visibility toggle and validation states.
Documentation header with breadcrumb search, version dropdown and mobile disclosure.
Pricing card with a 3D flip revealing plan details on hover, plus feature list.
Destructive-action confirm dialog with type-to-confirm safety and cancel focus return.
Auto-rotating testimonial carousel with avatar rail, quote fade and pause-on-hover.
Smooth <details>/<summary> accordion whose plus icon morphs into an x when open — no JS required.
User account dropdown showing plan, usage bar, sign-out and theme submenu.
Sidebar with collapsible section groups, chevron animation and active child highlighting.
Feature tabs that swap a preview mock plus description and bullet list per tab.
A Tinder-style card stack: drag, rotate and fling cards with LIKE/NOPE stamps; the deck refills when empty. Rendered in the Crimson Heat palette.
A donut chart whose arcs draw themselves on load; hovering a legend row lifts the matching slice. Rendered in the Deep Indigo palette.
A confirmation modal that springs in over a blurred overlay and closes on backdrop or Esc. Rendered in the Deep Indigo palette.
Gradient underline springs between tabs with width+left animation; output line reflects the active tab.
A creator profile card: gradient avatar ring, stats row and a follow button that toggles. Rendered in the Candy Pink palette.
A glass card whose gradient border and inner glow follow the cursor position — mask-composite trick, no canvas.
Gaming leaderboard with animated rank deltas, medal highlights and search filter.
Creator profile card with verified badge, follower count, tags and subscribe pill.
Customer-support thread with agent reply, attached-file chip and canned response buttons.
Agile sprint board with story-point badges, wip-limit callouts and sprint progress header.
Three-step signup wizard with progress rail, per-step validation and review summary.
A creator profile card: gradient avatar ring, stats row and a follow button that toggles. Rendered in the Deep Indigo palette.
Dashboard topbar with global search, notification bell, quick actions and user chip.
Two social-proof logo rows drifting in opposite directions, edge-faded with masks, pausing on hover.
Analytics stat card lifting in 3D with sparkline, delta badge and hover sheen.
Share modal with platform icons, copy-link feedback, expiry selector and QR teaser.
Product onboarding screens with illustration steps, progress dots and skip/finish flow.
Notification panel with grouped feed, unread dot markers and mark-all-read.
Analytics KPI tile: pulsing status dot, counting number, delta chip and a live-updating sparkline. Rendered in the Deep Indigo palette.
A seamless infinite marquee of brand chips that slows on hover — duplicated for the loop. Rendered in the Rose Gold palette.
A two-step product tour: dimmed veil with a glowing cutout ring snaps to each target, tooltip advances. Rendered in the Cyber Lime palette.
Fire success, info and warning toasts that slide in, stack up and auto-dismiss with a timer bar. Rendered in the Ocean Sky palette.
Hold the destructive button for 1.2s as a red fill sweeps across — releasing early cancels the action.
A frosted-glass pricing card with a popular ribbon, feature checklist and gradient CTA. Rendered in the Ultra Violet palette.
Signup fields validate as you type: green check borders, rule hints, shake on bad submit, success flare. Rendered in the Mint Breeze palette.
A Tinder-style card stack: drag, rotate and fling cards with LIKE/NOPE stamps; the deck refills when empty. Rendered in the Deep Indigo palette.
Billing-focused FAQ accordion with plan-specific answers and expandable invoice notes.
Segmented control tabs carrying live counts, animated selection and mobile wrap.
Finance transaction table with status pills, currency deltas and date grouping.
Team grid card with role, social links, skill tags and hover accent ring.
Channel chat with emoji reaction row, thread peek and member presence dots.
Hiring kanban with candidate cards, stage counters, score chips and interview tags.
iOS-style segmented tabs where the gradient indicator springs between options and resizes itself.
Password reset form with token step, strength meter and success state animation.
Marketing navbar with center links, right CTA pair and scroll-shrink behaviour.
App-store style card with layered 3D screenshot stack and download buttons.
Feedback dialog with star prompt, sentiment buttons and thank-you state.
Interactive canvas node graph: drifting particles link up, and every node reaches toward your cursor with cyan tendrils.
An analytics stat card whose headline number rolls up on load beside a tiny SVG sparkline. Rendered in the Cyber Lime palette.
Glassy storefront card: gradient artwork, size chips, price, and an add-to-cart that snaps to ✓ Added. Rendered in the Rose Gold palette.
Glassy storefront card: gradient artwork, size chips, price, and an add-to-cart that snaps to ✓ Added. Rendered in the Ultra Violet palette.
Spotlight carousel with large media panels, caption foot and side thumbnails.
Language switcher dropdown with flag chips, native-name rows and check on active.
Documentation sections as accordions with heading anchors and expand-all control.
Analytics chart tabs switching time ranges with live gridline transitions.
E-commerce catalog table with thumbnails, stock bars, price cells and bulk actions.
Podcast host card with episode count, listener stats and follow CTA.
Group chat highlighting @mentions, pin indicator and unread divider chips.
Editorial kanban from idea to publish with assignee avatars and deadline chips.
Passwordless login with email input, sent-state illustration and resend timer.
Wrong password triggers a horizontal shake with red ring; correct password shows green success — instant feedback.
Centered glass navbar with pill-shaped links, logo mark and mobile bottom bar.
An account dropdown whose items cascade in with a staggered rise, closing on outside click. Rendered in the Deep Indigo palette.
FAB springs open four glass action buttons in a radial arc; plus icon rotates into an x while open.
A pointer-tracked 3D card: it tilts toward the cursor while a glossy glare sweeps across. Rendered in the Candy Pink palette.
A FAQ accordion with buttery height animation using the grid-rows trick and rotated chevrons. Rendered in the Ocean Sky palette.
A creator profile card: gradient avatar ring, stats row and a follow button that toggles. Rendered in the Royal Gold palette.
A confirmation modal that springs in over a blurred overlay and closes on backdrop or Esc. Rendered in the Candy Pink palette.
Glassy storefront card: gradient artwork, size chips, price, and an add-to-cart that snaps to ✓ Added. Rendered in the Cyber Lime palette.
A chat mock: user bubble lands, three-dot typing indicator breathes, then the AI answer types itself in. Rendered in the Aurora Teal palette.
A big CTA that springs toward the cursor while hovered and snaps back on leave — 35% follow ratio.
A frosted-glass pricing card with a popular ribbon, feature checklist and gradient CTA. Rendered in the Rose Gold palette.
Album art cards fanning in 3D perspective with hover fan-out and track chips.
Call overlay modal with participant grid, mute controls and leave confirmation.
Hotel gallery carousel with room captions, price chip and swipe hint dots.
Global quick-action dropdown with search, recents and grouped shortcuts.
Plan comparison accordion revealing per-plan feature details with check icons.
Click a panel in the horizontal row and it expands to 3.2× while others compress — description fades in.
Left-vertical tabs paired with description cards and link footers.
Event RSVP table with ticket tiers, check-in status and dietary tags.
A floating glass navigation pill with a hover indicator that glides between links. Rendered in the Rose Gold palette.
Course instructor card listing mini courses, ratings and schedule chip.
Review chat with screenshot comments, resolve button and version tag.
Ops incident board with severity chips, owner avatars and SLA countdowns.
A seamless infinite marquee of brand chips that slows on hover — duplicated for the loop. Rendered in the Mono Pearl palette.
A stream of team events slides in one by one with avatar rings, relative timestamps and a live glow dot. Rendered in the Mono Pearl palette.
Initials avatars overlap with negative margin; hovering lifts and enlarges one above the rest, +N chip at the end.
2FA code entry with six animated digit inputs, resend timer and device trust toggle.
App shell combining icon sidebar, glass topbar and content breadcrumb.
Tabs with a gradient pill indicator that slides and resizes to the active tab, content cross-fading. Rendered in the Crimson Heat palette.
Feature card with a slow 3D auto-rotation showing front and back content.
Shortcuts reference modal with grouped kbd rows and search filter.
Auto-scrolling logo wall with marquee pause and grayscale-to-color hover.
Filter bar with sort dropdown, active filter chips and clear-all.
Learning modules as accordion sections with lesson counts and progress ticks.
Editor tabs switching HTML/CSS/JS panes with filename dots and copy button.
HR directory with role filters, avatar rows, department tags and status lights.
Athlete profile card with activity heatmap, PR stats and season chip.
A seamless infinite marquee of brand chips that slows on hover — duplicated for the loop. Rendered in the Ocean Sky palette.
AI assistant thread with model thinking chip, regenerate action and copy bubbles.
Backlog kanban with epic tags, story points, priority flags and sprint boundary.
Company signup with workspace-name field, plan radio and invite-skip option.
Mobile-first bottom tab bar with center FAB and active indicator bounce.
Certificate card with 3D seal, achiever info and share actions.
A music-player card: spinning artwork disc, play/pause morph, live progress and bouncing equalizer bars. Rendered in the Mono Pearl palette.
Calendar range picker dialog with preset chips, clear and apply actions.
Glass pricing card that tilts in 3D toward the cursor while a radial spotlight glow chases the pointer.
Gamified achievement strip sliding badges with unlock shimmer and progress.
A donut chart whose arcs draw themselves on load; hovering a legend row lifts the matching slice. Rendered in the Sunset Amber palette.
Saved items dropdown with thumbnail list, categories and remove-on-hover.
Settings page split into collapsible groups with toggles inside sections.
Metric tabs switching KPI panels with animated counters and comparison arrows.
A pointer-tracked 3D card: it tilts toward the cursor while a glossy glare sweeps across. Rendered in the Royal Gold palette.
A semicircle SVG gauge that sweeps to its value on load, counts the % up, color-shifting by zone. Rendered in the Ultra Violet palette.
A stream of team events slides in one by one with avatar rings, relative timestamps and a live glow dot. Rendered in the Deep Indigo palette.
A confirmation modal that springs in over a blurred overlay and closes on backdrop or Esc. Rendered in the Royal Gold palette.
A seamless infinite marquee of brand chips that slows on hover — duplicated for the loop. Rendered in the Sunset Amber palette.
A stream of team events slides in one by one with avatar rings, relative timestamps and a live glow dot. Rendered in the Sunset Amber palette.
Trading-card style rainbow sheen (color-dodge) tracks the pointer over a 3D-tilting glass pass card.
A donut chart whose arcs draw themselves on load; hovering a legend row lifts the matching slice. Rendered in the Cyber Lime palette.
Billing rows with plan names, renewal dates, payment methods and manage action.
Fire success, info and warning toasts that slide in, stack up and auto-dismiss with a timer bar. Rendered in the Cyber Lime palette.
A semicircle SVG gauge that sweeps to its value on load, counts the % up, color-shifting by zone. Rendered in the Mono Pearl palette.
Company profile card with funding round, team avatars, HQ and website.
E-commerce order chat with tracking updates, delivery card and support transfer.
Design kanban with concept/prototype/review columns and asset tags.
A 300px radial light follows the cursor and snaps in from the edge the pointer entered from.
Verification email state card with spinner, resend and change-email links.
A chat mock: user bubble lands, three-dot typing indicator breathes, then the AI answer types itself in. Rendered in the Rose Gold palette.
Header with a fake command bar that expands into a search overlay.
Fire success, info and warning toasts that slide in, stack up and auto-dismiss with a timer bar. Rendered in the Rose Gold palette.
Collectible card with 3D tilt, rarity aura and owner history chips.
Invite dialog with emails list, role select, invite-link toggle and sent state.
Cooking recipe carousel stepping through instructions with ingredient chips.
Share button springs four circular action orbits (X, link, embed, like) outward along a fan path.
Workspace switcher with avatar tiles, plan tags and create-new row.
A scroll-snap card carousel with arrow controls and live pagination dots. Rendered in the Rose Gold palette.
A scroll-snap card carousel with arrow controls and live pagination dots. Rendered in the Mint Breeze palette.
Generates 5-color HSL-harmonic palettes on click or spacebar; click a swatch to copy its hsl() value.
Plan picker where whole cards are radio targets — checked card gets a gradient border, filled tick and glow.
A frosted-glass pricing card with a popular ribbon, feature checklist and gradient CTA. Rendered in the Ocean Sky palette.
A two-step product tour: dimmed veil with a glowing cutout ring snaps to each target, tooltip advances. Rendered in the Ultra Violet palette.
Legal FAQ accordion covering terms, privacy and refunds with prose sections.
Click the core and six icon satellites rotate into position around it on an invisible ring; core spins as it opens.
Security panel tabs for password, devices and sessions with status icons.
Developer API usage table with endpoint rows, rate-limit bars and keys.
Mentor profile with hourly rate, availability chips and intro video button.
Forum-style thread preview with upvote chips, reply counts and tags.
A semicircle SVG gauge that sweeps to its value on load, counts the % up, color-shifting by zone. Rendered in the Aurora Teal palette.
Release management kanban with version columns, regression checks and launch gates.
Enterprise SSO sign-in with provider grid, domain hint and IT note.
A floating glass navigation pill with a hover indicator that glides between links. Rendered in the Ocean Sky palette.
Editor chrome with an unsaved-change dot, undo/redo cluster and avatar menu.
Course card tilting in 3D with progress ring, instructor chip and lesson count.
Upgrade dialog with per-plan radio rows, usage meter and price delta.
Avatar button opens a blurred-glass account menu with item rows, a count badge, separator and red sign-out.
A seamless infinite marquee of brand chips that slows on hover — duplicated for the loop. Rendered in the Cyber Lime palette.
A music-player card: spinning artwork disc, play/pause morph, live progress and bouncing equalizer bars. Rendered in the Aurora Teal palette.
Four emoji reactions (Wow/Love/Huh/Fire) lift and pop on hover/click; selecting one increments its count.
A scroll-snap card carousel with arrow controls and live pagination dots. Rendered in the Crimson Heat palette.
Tabs with a gradient pill indicator that slides and resizes to the active tab, content cross-fading. Rendered in the Aurora Teal palette.
HTML5 drag-and-drop reordering for list rows with a drag grip, glowing status dot and drop-target highlight.
A floating glass navigation pill with a hover indicator that glides between links. Rendered in the Cyber Lime palette.
A floating glass navigation pill with a hover indicator that glides between links. Rendered in the Sunset Amber palette.
Analytics KPI tile: pulsing status dot, counting number, delta chip and a live-updating sparkline. Rendered in the Mint Breeze palette.
Fire success, info and warning toasts that slide in, stack up and auto-dismiss with a timer bar. Rendered in the Sunset Amber palette.
A Tinder-style card stack: drag, rotate and fling cards with LIKE/NOPE stamps; the deck refills when empty. Rendered in the Mint Breeze palette.
A two-step product tour: dimmed veil with a glowing cutout ring snaps to each target, tooltip advances. Rendered in the Candy Pink palette.
A FAQ accordion with buttery height animation using the grid-rows trick and rotated chevrons. Rendered in the Cyber Lime palette.
Signup fields validate as you type: green check borders, rule hints, shake on bad submit, success flare. Rendered in the Aurora Teal palette.
Labels rise, shrink and turn cyan when the field focuses or has content — classic material-style form polish.
A tilted grid wall of tiles that lean toward your mouse and pop out toward the viewer on hover with glow.
Click the button and 44 colored pieces explode outward with gravity, rotation and fade — vanilla JS physics.
A semicircle SVG gauge that sweeps to its value on load, counts the % up, color-shifting by zone. Rendered in the Cyber Lime palette.
Fire success, info and warning toasts that slide in, stack up and auto-dismiss with a timer bar. Rendered in the Aurora Teal palette.
Glassy storefront card: gradient artwork, size chips, price, and an add-to-cart that snaps to ✓ Added. Rendered in the Ocean Sky palette.
A scroll-snap card carousel with arrow controls and live pagination dots. Rendered in the Ocean Sky palette.
Signup fields validate as you type: green check borders, rule hints, shake on bad submit, success flare. Rendered in the Royal Gold palette.
A donut chart whose arcs draw themselves on load; hovering a legend row lifts the matching slice. Rendered in the Mono Pearl palette.
An analytics stat card whose headline number rolls up on load beside a tiny SVG sparkline. Rendered in the Aurora Teal palette.
Analytics KPI tile: pulsing status dot, counting number, delta chip and a live-updating sparkline. Rendered in the Crimson Heat palette.
Three cards that rotate on the Y axis on hover — front face has a glyph, back face carries the details.
A seamless infinite marquee of brand chips that slows on hover — duplicated for the loop. Rendered in the Deep Indigo palette.
Input that ignites with a fuchsia ring, top light spill and tinted background on focus, plus a gradient CTA.
Glass consent bar slides up from the bottom with spring easing and dismisses with a slide-out.
Glassy storefront card: gradient artwork, size chips, price, and an add-to-cart that snaps to ✓ Added. Rendered in the Candy Pink palette.
A confirmation modal that springs in over a blurred overlay and closes on backdrop or Esc. Rendered in the Crimson Heat palette.
A two-step product tour: dimmed veil with a glowing cutout ring snaps to each target, tooltip advances. Rendered in the Rose Gold palette.
A scroll-snap card carousel with arrow controls and live pagination dots. Rendered in the Candy Pink palette.
A chat mock: user bubble lands, three-dot typing indicator breathes, then the AI answer types itself in. Rendered in the Cyber Lime palette.
A chat mock: user bubble lands, three-dot typing indicator breathes, then the AI answer types itself in. Rendered in the Sunset Amber palette.
A two-step product tour: dimmed veil with a glowing cutout ring snaps to each target, tooltip advances. Rendered in the Royal Gold palette.
Product card that tilts in 3D following the cursor with layered glow and spec chips.
Keyboard-navigable dropdown with grouped actions, shortcut hints and arrow-key support.
Frosted dock bar where nearby icons swell and lift with spring physics — hover distance drives the scale.
A chat mock: user bubble lands, three-dot typing indicator breathes, then the AI answer types itself in. Rendered in the Mono Pearl palette.
A confirmation modal that springs in over a blurred overlay and closes on backdrop or Esc. Rendered in the Ultra Violet palette.
Full-viewport sections where the page background interpolates through per-section RGB stops as you scroll.
Tag field: chips pop in with a spring, ✕ removes with a scale-out; type and Enter to add new slug-style tags.
A confirmation modal that springs in over a blurred overlay and closes on backdrop or Esc. Rendered in the Mono Pearl palette.
A FAQ accordion with buttery height animation using the grid-rows trick and rotated chevrons. Rendered in the Sunset Amber palette.
A stream of team events slides in one by one with avatar rings, relative timestamps and a live glow dot. Rendered in the Ocean Sky palette.
A pointer-tracked 3D card: it tilts toward the cursor while a glossy glare sweeps across. Rendered in the Deep Indigo palette.
Text runs around an SVG circle and slowly rotates around a glowing gradient core — seal/badge stamp.
A pointer-tracked 3D card: it tilts toward the cursor while a glossy glare sweeps across. Rendered in the Crimson Heat palette.
Three gradient bars morph into an X with a springy cubic-bezier when toggled — the classic nav button.
A Tinder-style card stack: drag, rotate and fling cards with LIKE/NOPE stamps; the deck refills when empty. Rendered in the Ocean Sky palette.
Two overlaid range inputs form a min/max selector with a gradient selected band and live mono price labels.
An account dropdown whose items cascade in with a staggered rise, closing on outside click. Rendered in the Mono Pearl palette.
Glassy storefront card: gradient artwork, size chips, price, and an add-to-cart that snaps to ✓ Added. Rendered in the Royal Gold palette.
A scroll-snap card carousel with arrow controls and live pagination dots. Rendered in the Royal Gold palette.
Terminal-style headline with animated chromatic aberration slices — magenta and cyan clones clip and jitter on a loop.
A FAQ accordion with buttery height animation using the grid-rows trick and rotated chevrons. Rendered in the Mint Breeze palette.
A fanned deck of release-note cards in perspective 3D — hover to fan them apart; the whole stack leans toward your mouse.
Tabs with a gradient pill indicator that slides and resizes to the active tab, content cross-fading. Rendered in the Royal Gold palette.
A scroll-snap card carousel with arrow controls and live pagination dots. Rendered in the Aurora Teal palette.
A two-step product tour: dimmed veil with a glowing cutout ring snaps to each target, tooltip advances. Rendered in the Ocean Sky palette.
Five gradient swatches retint the whole demo via root hue-rotate — a one-component theming trick.
Frosted-glass sticky navbar with animated active pill and mobile slide-in menu.
Monthly/yearly pricing card with a springy toggle that updates prices with a count-up.
Auto-advancing testimonial carousel with quote cards, avatars and progress dots.
A floating glass navigation pill with a hover indicator that glides between links. Rendered in the Mint Breeze palette.
Responsive team grid with photo, role, social icons and hover overlay bio.
Accessible FAQ accordion with smooth height animation and plus/minus icon morph.
Stacking toast notifications with auto-dismiss, progress bar and swipe-close.
Count-up stat cards that trigger on scroll with eased number animation.
Overlapping avatar stack with +N overflow chip and hover spread effect.
Bento feature cards with gradient glow, icon float and hover lift.
An analytics stat card whose headline number rolls up on load beside a tiny SVG sparkline. Rendered in the Ocean Sky palette.
An analytics stat card whose headline number rolls up on load beside a tiny SVG sparkline. Rendered in the Sunset Amber palette.
Fire success, info and warning toasts that slide in, stack up and auto-dismiss with a timer bar. Rendered in the Deep Indigo palette.
A donut chart whose arcs draw themselves on load; hovering a legend row lifts the matching slice. Rendered in the Aurora Teal palette.
A confirmation modal that springs in over a blurred overlay and closes on backdrop or Esc. Rendered in the Aurora Teal palette.
A frosted-glass pricing card with a popular ribbon, feature checklist and gradient CTA. Rendered in the Mint Breeze palette.
A creator profile card: gradient avatar ring, stats row and a follow button that toggles. Rendered in the Ocean Sky palette.
A donut chart whose arcs draw themselves on load; hovering a legend row lifts the matching slice. Rendered in the Ultra Violet palette.
Animated tab panel with sliding indicator and fade-in content transitions.
Account dropdown with avatar, name, menu items and outside-click close.
Vertical milestone timeline with pulsing dots, connecting line and staggered reveal.
Mini sparkline charts in stat cards with area fill and hover tooltip.
⌘K-style command search bar with keyboard hints and grouped results.
Infinite scrolling logo marquee with pause-on-hover and gradient masks.
Image/text split panel with parallax image and animated bullet list.
A seamless infinite marquee of brand chips that slows on hover — duplicated for the loop. Rendered in the Ultra Violet palette.
Header bell with unread badge, dropdown feed and mark-all-read action.
Input group with floating labels, validation states and focus ring.
A stream of team events slides in one by one with avatar rings, relative timestamps and a live glow dot. Rendered in the Ultra Violet palette.
Multi-step progress indicator with checkmarks and connecting bar animation.
A floating glass navigation pill with a hover indicator that glides between links. Rendered in the Candy Pink palette.
Analytics KPI tile: pulsing status dot, counting number, delta chip and a live-updating sparkline. Rendered in the Aurora Teal palette.
Signup fields validate as you type: green check borders, rule hints, shake on bad submit, success flare. Rendered in the Candy Pink palette.
Breathing screen-blend color blobs behind huge overlay type — the Liquid/Stripe-style ambient backdrop.
An editor mockup that re-types syntax-highlighted code per tab — Hero.tsx, a GLSL shader, the AI prompt.
A stream of team events slides in one by one with avatar rings, relative timestamps and a live glow dot. Rendered in the Cyber Lime palette.
Dismissible top announcement bar with gradient background and close button.
A Tinder-style card stack: drag, rotate and fling cards with LIKE/NOPE stamps; the deck refills when empty. Rendered in the Aurora Teal palette.
Card payment selector with radio cards, logos and selected glow.
A stack of pages fans open like a book on hover — layered rotateY flips with left-edge transform origin.
Collapsible sidebar with icons, section labels and active indicator bar.
Aggregated review card with star breakdown bars and average score.
Monospace code block with filename tab, syntax highlights and copy button.
Month calendar preview with event dots and today highlight.
iOS-style switch with a springy knob carrying the icon, track recolors sky-blue by day and deep space at night.
Rich search result with thumbnail, title, snippet and tag chips.
Side-by-side comparison bars with labels and percentage values.
Messenger-style chat thread with avatar bubbles, timestamps and input box.
Drag-and-drop upload zone with file preview, progress and success state.
A creator profile card: gradient avatar ring, stats row and a follow button that toggles. Rendered in the Mint Breeze palette.
Analytics KPI tile: pulsing status dot, counting number, delta chip and a live-updating sparkline. Rendered in the Candy Pink palette.
A FAQ accordion with buttery height animation using the grid-rows trick and rotated chevrons. Rendered in the Candy Pink palette.
An account dropdown whose items cascade in with a staggered rise, closing on outside click. Rendered in the Cyber Lime palette.
Blurred glass tooltips with an arrow notch pop in above or below buttons on hover, spring easing.
A chat mock: user bubble lands, three-dot typing indicator breathes, then the AI answer types itself in. Rendered in the Deep Indigo palette.
A stream of team events slides in one by one with avatar rings, relative timestamps and a live glow dot. Rendered in the Rose Gold palette.
Product tour tabs that swap feature illustrations with description panels.
Full dropdown notification center with grouped feed and unread dots.
Login/register split card with brand panel, social buttons and form fields.
Bottom cookie banner with description, accept/decline and settings link.
Language dropdown with flags, checkmark on active and hover states.
Streaming activity list with icons, relative timestamps and live dot.
Row of KPI widgets with icons, delta arrows and mini bars.
Friendly empty state with icon, heading, description and action button.
A music-player card: spinning artwork disc, play/pause morph, live progress and bouncing equalizer bars. Rendered in the Cyber Lime palette.
A semicircle SVG gauge that sweeps to its value on load, counts the % up, color-shifting by zone. Rendered in the Candy Pink palette.
Interactive filter chips with counts, multi-select and clear-all.
Pagination bar with numbered pages, prev/next and ellipsis.
A Tinder-style card stack: drag, rotate and fling cards with LIKE/NOPE stamps; the deck refills when empty. Rendered in the Rose Gold palette.
A music-player card: spinning artwork disc, play/pause morph, live progress and bouncing equalizer bars. Rendered in the Crimson Heat palette.
Ringing bell with a spring pop-in count badge; rings periodically, increments on click.
Accessible breadcrumb with chevron separators and home icon.
Invite teammates card with email input, permission dropdown and send button.
A floating glass navigation pill with a hover indicator that glides between links. Rendered in the Ultra Violet palette.
Pricing comparison table with checkmarks, highlights and CTA row.
FAB stack that expands on click with tooltips and ripple.
A frosted-glass pricing card with a popular ribbon, feature checklist and gradient CTA. Rendered in the Cyber Lime palette.
List rows with leading badges, titles, subtitles and trailing actions.
Primary button with split dropdown arrow revealing secondary actions.
Fire success, info and warning toasts that slide in, stack up and auto-dismiss with a timer bar. Rendered in the Ultra Violet palette.
Weather card with condition icon, temperature, forecast strip and location.
Scrolling financial ticker with up/down colored values.
A floating glass navigation pill with a hover indicator that glides between links. Rendered in the Royal Gold palette.
Gamified achievement grid with locked/unlocked badges and progress.
Settings-style list of keyboard shortcuts with kbd keys.
Analytics KPI tile: pulsing status dot, counting number, delta chip and a live-updating sparkline. Rendered in the Ocean Sky palette.
A Tinder-style card stack: drag, rotate and fling cards with LIKE/NOPE stamps; the deck refills when empty. Rendered in the Candy Pink palette.
Signup fields validate as you type: green check borders, rule hints, shake on bad submit, success flare. Rendered in the Ocean Sky palette.
Full-screen loading overlay with spinner, progress and shimmer text.
Analytics KPI tile: pulsing status dot, counting number, delta chip and a live-updating sparkline. Rendered in the Royal Gold palette.
A FAQ accordion with buttery height animation using the grid-rows trick and rotated chevrons. Rendered in the Royal Gold palette.
A scroll-snap card carousel with arrow controls and live pagination dots. Rendered in the Deep Indigo palette.
Tabs with a gradient pill indicator that slides and resizes to the active tab, content cross-fading. Rendered in the Rose Gold palette.
An analytics stat card whose headline number rolls up on load beside a tiny SVG sparkline. Rendered in the Rose Gold palette.
A semicircle SVG gauge that sweeps to its value on load, counts the % up, color-shifting by zone. Rendered in the Royal Gold palette.
Glassy storefront card: gradient artwork, size chips, price, and an add-to-cart that snaps to ✓ Added. Rendered in the Mint Breeze palette.
A frosted-glass pricing card with a popular ribbon, feature checklist and gradient CTA. Rendered in the Sunset Amber palette.
Tabs with a gradient pill indicator that slides and resizes to the active tab, content cross-fading. Rendered in the Candy Pink palette.
A creator profile card: gradient avatar ring, stats row and a follow button that toggles. Rendered in the Rose Gold palette.
Monospace install-command tray with a gradient copy button, clipboard API + execCommand fallback, 'Copied ✓' state.
A real six-face 3D cube you rotate with arrow keys or hover — each face is a nav destination, neon-edged and glassy.
A pointer-tracked 3D card: it tilts toward the cursor while a glossy glare sweeps across. Rendered in the Mono Pearl palette.
A stream of team events slides in one by one with avatar rings, relative timestamps and a live glow dot. Rendered in the Aurora Teal palette.
A settings/help panel listing shortcuts with glossy 3D keyboard key chips — JetBrains Mono, fuchsia glyphs.
Pointer-dragable card rail with scroll-snap, hidden scrollbar, scale-on-hover and arrow-key navigation.
A semicircle SVG gauge that sweeps to its value on load, counts the % up, color-shifting by zone. Rendered in the Deep Indigo palette.
A Tinder-style card stack: drag, rotate and fling cards with LIKE/NOPE stamps; the deck refills when empty. Rendered in the Royal Gold palette.
Glassy storefront card: gradient artwork, size chips, price, and an add-to-cart that snaps to ✓ Added. Rendered in the Sunset Amber palette.
A donut chart whose arcs draw themselves on load; hovering a legend row lifts the matching slice. Rendered in the Ocean Sky palette.
Drag the top card to like/nope — it flies off with rotation, stamps fade in at the edges, stack reshuffles. Pointer events.
A music-player card: spinning artwork disc, play/pause morph, live progress and bouncing equalizer bars. Rendered in the Deep Indigo palette.
A chat mock: user bubble lands, three-dot typing indicator breathes, then the AI answer types itself in. Rendered in the Ultra Violet palette.
Tabs with a gradient pill indicator that slides and resizes to the active tab, content cross-fading. Rendered in the Deep Indigo palette.
Signup fields validate as you type: green check borders, rule hints, shake on bad submit, success flare. Rendered in the Crimson Heat palette.
A pointer-tracked 3D card: it tilts toward the cursor while a glossy glare sweeps across. Rendered in the Ultra Violet palette.
A FAQ accordion with buttery height animation using the grid-rows trick and rotated chevrons. Rendered in the Ultra Violet palette.
Friendly empty-state block with counter-rotating dashed orbit rings and a pulsing star, plus a CTA button.
Hovering the row brings one panel forward (flex grow, color, label) while siblings recede and desaturate.
Simple accessible breadcrumb trail: dim ancestors with cyan hover, fuchsia chevrons, bold current page.
A gradient pill that physically glides between tabs with a spring easing, while the panel cross-fades.
A YouTube/NProgress-style bar: starts fast, trickles toward 90%, then snaps complete with a glow head.
Success/error/info toasts that spring in from the bottom-right, stack up and auto-dismiss.
A gradient tooltip that springs toward the cursor position with lerp smoothing and an arrow caret.
Three stat cards whose numbers spring up from zero with cubic ease-out, styled with gradient numerals.
Buttons and their labels lean toward the cursor with different strength factors, then spring back on leave.
Pricing card that rotates in 3D toward the cursor with layered translateZ depth and a moving shine.
Height-animated FAQ rows using grid-template-rows 0fr→1fr — no fixed heights, perfect easing.
Three data cards stacked that fan open with rotation on hover; click one to spring it to the front.
Card with a radial glow that tracks the cursor plus a 1px gradient border-light that follows the pointer.
On hover, each letter rolls up out of an overflow mask while a gradient copy rolls in from below, staggered.
Two seamless marquee rows scrolling in opposite directions, edge-fade masks, pausing on hover.
Matrix-style glyph scramble that resolves into the target string, re-triggered on hover and on a timer.
A card that flips on its Y axis in 3D to show a gradient back face — works on hover and on tap for touch.
Twinkling starfield with periodic gradient shooting stars streaking across — drop it behind any hero.
Eight items orbit on a 3D ring that auto-rotates with perspective, pauses on hover, with a pulsing hub.