Personal Library
Stash
A growing collection of UI components I want to reuse. Click any card to see the live preview, copy the install command, and copy the source files.
57 components · 1 design · 3 templates
Buttons7
Launch Button
A machined metal CTA with a live WebGL starfield portal inside — stars streak into warp on hover, a white flash fires on click, plus a blur-in intro and cursor parallax.
Morphing Button
A bell-icon button that morphs into an email input on click. Uses Motion layout animations.
Visualizer Button
An outline button that doubles as an audio player — five randomized bars animate while an <audio> element plays.
Bluetooth Key
A tactile skeuomorphic Bluetooth toggle with an amber LED, glow, noise, and animated symbol paths. Pure SVG + CSS.
Glow Button
A dark CTA button with a cursor-tracking radial glow, glowing border, and a nudge-on-hover arrow.
Inputs & Forms3
Smooth Input
An input with a spring-animated caret that glides between characters, with password masking, scroll tracking and reduced-motion support.
Text Effects10
Reveal text word by word
Character stagger with a slide preset
Text Reveal
Reveals text by word, character, or line with fade, slide, scale, and blur presets. Motion-powered.
Text Rotate
Rotating text with configurable enter/exit animations, per-character stagger and imperative next/previous controls.
Thinking...
Shining Text
Text with a looping shine sweep driven by an animated gradient background clip. Motion-powered.
Words that blur into focus, one at a time.
Text Blur In
Text that fades and un-blurs into place, staggered by word or character. Lightweight Motion animation.
Build |
Typewriter
Characters appear one by one with an optional blinking cursor, looping through multiple strings with delete/retype.
Downloads
Uptime
Counting Number
Animates from a start value to a target number with a tween, formatted with thousands separators. Replayable via ref.
Generating your component...
ThinkingText Shimmer
A gradient shine sweeps across text continuously — great for loading and thinking states. Motion-powered.
Ship faster with beautifully animated components.
Hover this bottom-to-top highlight.
Trigger me
Text Highlight
A marker-style background sweeps behind text on hover, in view, or via ref — with ltr, rtl, ttb and btt directions.
Backgrounds6
Revenue
$48.2k
Active users
12,904
Animated Gradient (SVG)
Multi-color animated gradient background built from blurred SVG circles that drift around their container.
Spotlight
A dark radial gradient background.
Spotlight Background
A dark slate-950 wrapper with a centered radial gradient spotlight. Great for hero sections or card backdrops.
Purple Radial
Black center, electric purple edges.
Purple Radial Background
A deep purple radial gradient that fades from black at the center to electric purple at the edges.
Dot Grid
Tiny dots on a dark canvas.
Dot Grid Background
A dark dot-grid background made of tiny radial-gradient dots. Perfect for sci-fi dashboards or code-heavy interfaces.
Cards & Widgets9
Simplifying your workflow from day one. Manage your tasks, projects, and team in one place.
Card with Image
Compact card with image, trending/featured badges, description, and a CTA button. From reui.io.
Ship faster with edge infra
Deploy globally distributed services in seconds — no config, no cold starts.
Feature Block Animated Card
Feature card with pulsing icon row, a sweeping cyan scan line, and drifting sparkles. Great for bento/feature grids.
Monthly Budget
$3,200
Monthly spending limit
Spending breakdown
Housing
$1,200
Food
$420
Transport
$240
Subscriptions
$185
Other
$100
Budget Card
Animated monthly budget card with spend breakdown, month picker, and expandable details. Motion-powered.
Integrations
Integration Card
Searchable, paginated integrations picker with animated expandable rows. Framer Motion + lucide.
October, 2026
Subscription Calendar
Animated monthly subscription calendar with day indicators, search, add, and summary states.
A lightweight everyday runner with a bold profile, cushioned sole, and a shape that works on and off the track.
Card 12
Product card with hero image, like button, size/color badges, price, and CTA. Built on shadcn card primitives.
Simplifying your workflow from day one. Manage your tasks, projects, and team in one place.
Card 6
A card with image, badge, description, and CTA button. From Cnippet UI.
Image Scale Effect
This card features a smooth image scaling effect and background overlay on hover.
Card 7
A full-bleed image card with scale-on-hover effect and gradient overlay. From Cnippet UI.
Author Profile
Profile card showcasing the author’s avatar, name, and estimated reading time for each post.
Card 8
Full-bleed image profile card with top/bottom shadow fades, verified avatar and hover zoom. From Cnippet UI.
Carousels & Galleries5
Card Swipe Carousel
A stacked card carousel built on Swiper's cards effect, with grab-to-drag gestures, looping, optional autoplay, pagination and navigation arrows.
# 2
Hover Expand Gallery
A row of slim image cards that smoothly expand on hover or tap, revealing a gradient overlay and caption for the active image.
Interactive Folder Gallery
A macOS-style folder that opens on click and fans out a stack of draggable photos. Drag a photo down to close.
Navigation & Disclosure3
Accordion 11
Bordered accordion variant with chevron toggle indicators and highlighted expanded state. Built on shadcn's accordion primitive.
Page Sections6
Our Story
Scroll through the timeline — hover the cards and click to expand.
Chapter One
The Idea
It started as a sketch on a napkin. Two founders, one whiteboard, and a stubborn belief that the web could feel more alive. Weeks of late nights turned the sketch into a working prototype.
Chapter Two
First Launch
The first version shipped to a hundred beta users. It was rough, it was buggy — and people loved it anyway. The feedback shaped everything that came next.
Chapter Three
Growing Up
The team doubled, the roadmap tripled. A complete rebuild introduced the design system, realtime collaboration, and a mobile app that finally felt native.
Chapter Four
What's Next
Now the focus shifts to the platform: plugins, an open API, and a community of builders creating things we never imagined. The story is just getting started.
3D Interactive Timeline
Immersive vertical timeline with 3D perspective cards that tilt toward your cursor, pulsing active nodes, and expandable descriptions.
This is the first tool that actually keeps up with how fast our team iterates.
Ava Kim
Product Designer
We cut our build times in half the first week. It just works.
Daniel Ortiz
CTO, Framestack
Shipped my whole MVP over a weekend. The defaults are chef's kiss.
Maya Patel
Indie Hacker
This is the first tool that actually keeps up with how fast our team iterates.
Ava Kim
Product Designer
We cut our build times in half the first week. It just works.
Daniel Ortiz
CTO, Framestack
Shipped my whole MVP over a weekend. The defaults are chef's kiss.
Maya Patel
Indie Hacker
The API design is so clean that onboarding new devs takes minutes.
Tom Becker
Engineering Lead
Replaced three subscriptions with this one tool. Easy decision.
Lena Fischer
Founder, Loopwell
Rare to find something this polished. The details are incredible.
Chris Yamamoto
Staff Engineer
The API design is so clean that onboarding new devs takes minutes.
Tom Becker
Engineering Lead
Replaced three subscriptions with this one tool. Easy decision.
Lena Fischer
Founder, Loopwell
Rare to find something this polished. The details are incredible.
Chris Yamamoto
Staff Engineer
We cut our build times in half the first week. It just works.
Daniel Ortiz
CTO, Framestack
Shipped my whole MVP over a weekend. The defaults are chef's kiss.
Maya Patel
Indie Hacker
The API design is so clean that onboarding new devs takes minutes.
Tom Becker
Engineering Lead
We cut our build times in half the first week. It just works.
Daniel Ortiz
CTO, Framestack
Shipped my whole MVP over a weekend. The defaults are chef's kiss.
Maya Patel
Indie Hacker
The API design is so clean that onboarding new devs takes minutes.
Tom Becker
Engineering Lead
Shipped my whole MVP over a weekend. The defaults are chef's kiss.
Maya Patel
Indie Hacker
The API design is so clean that onboarding new devs takes minutes.
Tom Becker
Engineering Lead
Replaced three subscriptions with this one tool. Easy decision.
Lena Fischer
Founder, Loopwell
Shipped my whole MVP over a weekend. The defaults are chef's kiss.
Maya Patel
Indie Hacker
The API design is so clean that onboarding new devs takes minutes.
Tom Becker
Engineering Lead
Replaced three subscriptions with this one tool. Easy decision.
Lena Fischer
Founder, Loopwell
3D Testimonials
Vertically scrolling testimonial marquees tilted in 3D perspective. Pause on hover, reverse alternating columns.
Business Details
Tell us about your brand to start creating campaigns.
Onboarding Screen
Two-panel business onboarding screen with animated form fields, tooltip, and logo upload. Motion-powered.
Testimonials Columns
Vertically scrolling testimonial columns with looping motion. Great for landing page social proof sections.
Where Color MeetPowerful Concepts
Transforming ideas into visually striking designs that communicate, inspire, and stand out.
Trusted By Leading Brands
Hero 15
Full-screen dark hero with background image, nav bar, serif italic headline, dual CTAs, and trusted-brand row. Motion reveal animations.
WelcometoStackPilot—Poweringyourdigitaltransformation.
SuperchargeyourproductivitywithAI-drivenautomation.Integrate,orchestrate,andscaleyourbusiness— allinonesecureplatform.
Real-timeanalytics,seamlessintegrations,enterprise-gradesecurity.
Hero Section (Editorial)
Full-screen editorial hero with animated SVG grid lines, word-by-word reveal, cursor-following gradient, and click ripples.
Visual Effects6
Connect everything
Animated beams flowing between nodes — great for integration sections.
Animated Beam
An animated beam of light that travels along a curved path between any two elements — perfect for integration showcases and connection flows.
Climacode
A self-contained interactive SVG scene — moon, mountains, biplane, and weather-window controls. Renders inside a sandboxed iframe.
Logo Loop
Infinite horizontal or vertical logo marquee with smooth easing, hover pause/slow, fade edges, and optional scale-on-hover.
Img Sphere
Interactive 3D image sphere with Fibonacci distribution, drag-to-rotate with momentum, auto-rotation, and spotlight modal on click.
Thinking Orb
Dotted thought-orb loading indicators for AI and agent UIs. Nine hand-tuned states, 64px and 20px presets, auto dark/light, SSR-safe canvas.
Reading progress
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla.
Scroll Progress 3
Styled bar with percentage — rounded gradient bar with live percentage label. From Cnippet UI.