UI prompts161 free promptsNo account
A UI prompt library for vibe coders
Every prompt here was written for a component that already exists: you can touch its live preview, read the TSX it should produce and install it with one shadcn command. Paste one into Cursor, v0, Lovable, Bolt or Claude Code, then compare the result with the original.
Components prompts
All components, free and Pro- Offset Target ButtonA button whose label plate hangs off its hairline target along the grid's axis, reaches further and lights its bracket on hover or focus, and seats into the target in 120ms when you press it.Build a React + Tailwind button, `OffsetTargetButton({ children, href, onClick, type, tone, size, hang, breaks, disabled, ariaLabel, className })`. Full prompt →
- Z-Swap Plate CardA work card on the lattice: every third in a run breaks by the rule, two gutters out with the bracket, and hovering the card it overlaps lifts that card above it, the bracket going with the lift, in 240ms.Build a React + Tailwind card, `ZSwapPlateCard({ work, index, count, every, className })` where work = { title, client, year, tags, seed, href, image? }. Full prompt →
- Index Step NavA numbered nav whose third item hangs one gutter below the bar on a contrasting plate by the rule, the bar's hairline dipping under it, and a tag that steps to the current item, or the one you point at, in four ticks.Build a React + Tailwind nav, `IndexStepNav({ brand, brandHref, items, defaultActive, active, onChange, email, tone, every, className, style })`. Full prompt →
- Squash Press ButtonA pill that squashes under your finger and pops back: it sinks onto its base where you press, deeper the longer you hold, keeps its area as it squashes, and springs back with one overshoot while its tinted shadows collapse and return.Build a React + Tailwind button, `SquashPressButton({ children, href, onClick, type, variant, size, disabled, ariaLabel, className })`. Full prompt →
- Wobble Drop CardA release card that leans toward the pointer on a soft spring while the sticker on its corner follows through, swinging the other way and jiggling to a stop; press it and the card squashes onto its base and pops back.Build a React + Tailwind card, `WobbleDropCard({ drop, onAdd, className })` where drop = { title, artist, price, formats, sticker, stickerTone, cover: { bg, fg, shape: 'dot' | 'wave' | 'stack' }, href, cta }. Full prompt →
- Taffy Pill NavA floating pill nav whose bubblegum marker stretches like taffy to the link you choose: long and thin in flight, short and fat as it lands, with the labels turning paper exactly where it covers them.Build a React + Tailwind nav, `TaffyPillNav({ brand, links, defaultActive, active, onChange, cta, ctaShort, className, style })`. Full prompt →
- Weight Press ButtonA button whose press you can see in its type: hover and the label thickens as the button lifts; press and it goes bold under your finger while the button sinks and its shadow collapses to the contact line, then springs back.Build a React + Tailwind button, `WeightPressButton({ children, href, onClick, type, variant, size, disabled, ariaLabel, ariaPressed, className })`. Full prompt →
- Light Lift CardA card that lifts toward the pointer with shadows that behave like light: a two-degree tilt, an ambient shadow that widens and drifts away from the side that rose, a contact line that thins, and a plate of light at a colour temperature.Build a React + Tailwind card, `LightLiftCard({ title, kicker, body, kelvin, meta, href, className })`. Full prompt →
- Hairline Morph NavA nav whose single hairline stretches toward the next link and settles under it: its leading edge runs ahead on a quick spring while its trailing edge follows on a slower one, and the active label steps up a weight without shifting.Build a React + Tailwind nav, `HairlineMorphNav({ brand, links, cta, active, defaultActive, onNavigate, className, style })`. Full prompt →
- Bayer Fill ButtonA button whose fill prints in cell by cell through the 8x8 Bayer order on hover and focus, with its label inverting exactly where each cell lands; press it and the screen halves to a finer grid.Build a React + Tailwind button, `BayerFillButton({ children, href, onClick, type, variant, size, lit, disabled, ariaLabel, ariaPressed, className })`. Full prompt →
- Dither Develop CardA card whose image prints in cell by cell the first time it is seen, ordered-dithered with CSS alone, with a soft light that follows the pointer through the dither.Build a React + Tailwind card, `DitherDevelopCard({ title, kicker, body, image, alt, art, caption, href, cell, className })`. Full prompt →
- ASCII Density NavA nav whose active link is marked by a band of ASCII density: characters thicken through a ramp under the active link and flow to the next one on a spring, its peak in signal.Build a React + Tailwind nav, `AsciiDensityNav({ brand, links, cta, active, defaultActive, onNavigate, className, style })`. Full prompt →
- Keycap ButtonA button machined like a keycap: a press drops the cap 6px as its skirt collapses, release springs it back past rest, a specular follows the pointer and a copper status light glows while it's held.Build a React + Tailwind button, `KeycapButton({ children, href, onClick, type, variant, finish, size, lit, disabled, ariaLabel, ariaPressed, className })`. Full prompt →
- Extruded Spec CardA card holding a small machined dial built in CSS 3D: the card tilts toward the pointer and the dial turns to follow it one detent at a time, its copper marker lit, over a data-plate of specs.Build a React + Tailwind card, `ExtrudedSpecCard({ title, kicker, body, specs, finish, href, className })`. Full prompt →
- Curved Rail NavA nav whose links ride a shallow cylinder in real perspective: the active link stands forward and underlit in copper, and choosing another turns the rail toward it on a spring.Build a React + Tailwind nav, `CurvedRailNav({ brand, links, cta, active, defaultActive, onNavigate, className })`. Full prompt →
- Axis Press ButtonA button whose label is the control: letters under the pointer swell heavier and wider while the rest condense, so the button never changes size, and a press clenches every letter and springs it back.Build a React + Tailwind button, `AxisPressButton({ children, href, onClick, type, variant, size, palette, tone, disabled, className })`. Full prompt →
- Axis Session CardA programme card whose title is set by what the session is: a workshop quiet and narrow, a talk set, a keynote loud and wide, so a grid reads as a legend; hover pushes it further into its own kind.Build a React + Tailwind card, `AxisSessionCard({ kind, title, speaker, time, venue, day, href, palette, tone, className })`, kind being "workshop" | "talk" | "keynote". Full prompt →
- Axis Flow NavA nav whose links are one flush line: the active link is loud, the rest condensed, and choosing another makes the width flow to it letter by letter while the nav never changes size.Build a React + Tailwind nav, `AxisFlowNav({ brand, links, cta, active, defaultActive, onNavigate, palette, tone, className })`. Full prompt →
- Aurora Glow ButtonA night-glass pill with a sliver of aurora under it, turning on a 60s clock that every button on the page shares, spreading on hover and sending a ring of light out on press.Build a React + Tailwind button, `AuroraGlowButton({ children, href, onClick, type, variant, size, palette, disabled })`. Full prompt →
- Aurora Rim CardA night-glass card with a slow aurora rim that turns once every 52 seconds, feathered into light, brightening near the pointer while the card tilts a hair toward it.Build a React + Tailwind card, `AuroraRimCard({ children, palette, tilt, className, style })`. Full prompt →
- Aurora Flow NavA floating night-glass nav whose active mark is a band of aurora light that takes the colour of the sky above its link and flows to the next one leading edge first.Build a React + Tailwind nav, `AuroraFlowNav({ brand, links, cta, ctaVariant, active, defaultActive, onNavigate, palette })`. Full prompt →
- Soft Glow ButtonA pill with a grained light inside it that follows the pointer with a slow settle, a diffused bloom that rises behind it, and a press that exhales a soft ring of light.Build a React + Tailwind button, `SoftGlowButton({ children, href, onClick, tone, variant, glow, size, type, disabled })`, a pill with a light inside it. Full prompt →
- Halo Treatment CardA treatment card with a light well: a grained halo in the treatment's own colour rests low, then rises and blooms toward the pointer on hover or focus while the card lifts on a feathered shadow.Build a React + Tailwind card, `HaloTreatmentCard({ name, line, duration, price, href, glow, tag, tone, index })`, a treatment card with a light well. Full prompt →
- Chrome Pill ButtonA pill of polished chrome that reflects a lit room: its horizon, softbox glint and bezel light turn toward the pointer, and a press squashes it and drops a ring into the surface.Build a React + Tailwind button, `ChromePillButton({ children, href, onClick, variant, finish, size, type, disabled })`: a pill of polished chrome. Full prompt →
- Holo Ticket CardA tour date as a notched, perforated ticket whose stub carries the date in chrome numerals on a strip of holographic foil; it tilts toward the pointer while the foil's colour slides and a glare follows.Build a React + Tailwind card, `HoloTicketCard({ date, city, venue, status, href, label })`: a tour date as a ticket with a holographic stub. Full prompt →
- Mercury Pour NavA floating nav whose current-link indicator is a capsule of mercury on two springs: it stretches thin as it pours to the next link, snaps back round, reaches toward the link you hover, and turns the labels it covers dark.Build a React + Tailwind nav, `MercuryPourNav({ brand, links, active, onSelect, cta, finish })`: a floating pill whose current-link indicator is a capsule of mercury. Full prompt →
- Orbit Light ButtonA dark pill whose border carries one light: it laps the outline slowly, glides to the nearest point of the border under the pointer and lights the surface from there, and a press sends a ring outward.Build a React + Tailwind call-to-action button, `OrbitLightButton({ children, href, onClick, accent, size, idle, lap, type })`, a dark pill (linear-gradient #16161a to #0c0c0f, white 92% text, 48px or 40px tall) whose outline carries one… Full prompt →
- Pointer Lit CardA card lit from the pointer: a bright arc of light on the hairline border, a softer wash across the surface, a two-degree tilt toward the pointer and a little counter-parallax on the content.Build a React + Tailwind card, `PointerLitCard({ children, accent, tilt, radius, className, style })`, lit from the pointer. Full prompt →
- Pushed Shadow ButtonA neo-brutalist button on a hard 5px shadow: hover lifts it 2px, a press lands it exactly on its shadow. 3px ink everywhere, 100ms linear, no blur.Create a React + Tailwind component, PushedShadowButton: a neo-brutalist button that behaves like a physical object sitting on its own hard shadow. Full prompt →
- Offset Shadow CardA neo-brutalist card on a hard shadow: it lifts 2px on hover and lands on the shadow when pressed. A flat drawn motif or a photo, a punched price tag, a sticker badge, 3px ink throughout.Create a React + Tailwind component, OffsetShadowCard: a neo-brutalist card on a hard, unblurred shadow that lifts on hover and lands on its shadow when pressed. Full prompt →
- Hairline Tile ButtonA button that behaves like a live bento grid: on hover it re-tiles into compartments along lit hairline seams, compresses toward your press, and its keycaps are a real keyboard shortcut.Create a React + Tailwind client component, HairlineTileButton: a dark bento-style button that behaves like a live bento grid. At rest it is one flat tile (a tonal face, a 1px hairline, no shadow). On hover or keyboard focus its face… Full prompt →
- Bento Command NavSite navigation as one row of bento tiles sharing 1px hairlines, with a pointer light that shows through them and menus that open as panels of tiles.Create a React + Tailwind v4 client component, BentoCommandNav: site navigation set as one compact row of dark bento tiles that share their hairlines. Full prompt →
- Capture Loop CardA bento tile whose picture is a tightly cropped loop of your product, still until someone hovers or presses play, with a hairline that tracks the loop.Create a React + Tailwind v4 client component, CaptureLoopCard: a dark bento tile whose picture is a tightly cropped, muted loop of the product (a few seconds of a real screen), which plays only when someone shows interest. Full prompt →
- Liquid Glass ButtonA pill of liquid glass that bends what is behind it: real refraction at the rim, a rim and sheen lit by your pointer, and a gel-like press.Create a React + Tailwind client component, LiquidGlassButton: a pill of "liquid glass" in the style of Apple's 2025 material, which bends the backdrop instead of only blurring it. Full prompt →
- Liquid Glass SwitchA toggle whose knob swells into a clear glass lens while you hold or drag it, magnifying the track beneath, then springs home solid.Create a React + Tailwind client component, LiquidGlassSwitch: an iOS-26-style toggle whose knob turns into a clear glass lens while it is held or dragged, magnifying the track beneath it. Full prompt →
- Swatch Fan DeckA fan deck of paint chips that spreads in your hand on hover or focus — a real radio group, with arrow keys and the colour's name, not its hex.Create a React + Tailwind component named SwatchFanDeck: a fan deck of paint chips that spreads out like a hand of cards on hover, touch or focus, and works as an accessible colour picker. Full prompt →
- OTP Code InputA one-time-code field whose cells survive SMS autofill, paste and Android backspace.Build a one-time-code (OTP) input in React + Tailwind named OtpCodeInput — N single-character cells that behave like one field. Full prompt →
- Crosshair Cursor ReadoutA drafting-tool crosshair with live X/Y coordinates that trails the pointer.Create a React + Tailwind component named CursorCrosshairReadout — a technical, drafting-software style cursor for a bounded container. Full prompt →
- Cursor Label FollowerA contextual chip that trails the pointer and names whatever it is over.Create a React + Tailwind + Framer Motion component named CursorLabelFollower. Full prompt →
- Cursor Lens MagnifierA glass lens that follows the pointer and magnifies the live DOM beneath it.Create a React + Tailwind component named CursorLensMagnifier — a circular magnifying lens that follows the cursor. Full prompt →
- Snapping CursorA cursor dot that latches onto interactive elements and takes their exact shape.Create a React + Tailwind + Framer Motion component named CursorSnapTarget — a custom cursor that snaps onto interactive elements and takes their shape. Full prompt →
- Stroke Draw ButtonA button whose outline draws itself around the shape on hover, at any size.Create a React + Tailwind component named HoverStrokeDrawButton — a button whose outline draws itself on hover. Full prompt →
- Morphing Island NotchA status pill that resizes itself fluidly around whatever content it holds.Create a React + Tailwind + Framer Motion component named MorphingIslandNotch — a pill that morphs between a compact and an expanded state, like a status island. Full prompt →
- Fuzzy Match InputSubsequence search that scores by run length and word starts, and highlights the hits.Create a React + Tailwind component named FuzzyMatchInput — a search field that fuzzy-matches by subsequence and highlights exactly which characters matched. Full prompt →
- Scrub Timeline PlayerA media scrubber with buffered range, hover timestamp and pointer-capture dragging.Create a React + Tailwind component named ScrubTimelinePlayer — a media scrubber with a buffered range, a draggable playhead and a hover timestamp. Full prompt →
- Theme Toggle Sun Moon MorphA track+thumb switch whose icon morphs between a sun and a crescent moon.Create a React + Tailwind + Framer Motion "sun/moon morph theme toggle" component named ThemeToggleSunMoonMorph. Full prompt →
- Share Button ExpandA share icon that expands into a row of social options with a copy-link state.Create a React + Tailwind + Framer Motion "expanding share button" component named ShareButtonExpand. Full prompt →
- Badge Ping CounterAn icon badge counter that bounces and pings once on every increment.Create a React + Tailwind + Framer Motion "badge ping counter" component named BadgePingCounter. Full prompt →
- Pricing Toggle SwitchA monthly/yearly billing switch with the price sliding to its new value.Create a React + Tailwind + Framer Motion "pricing billing toggle" component named PricingToggleSwitch. Full prompt →
- File Upload DropzoneA real drag-and-drop file zone with a live dragover state and file chips.Create a React + Tailwind + Framer Motion "file upload dropzone" component named FileUploadDropzone. Full prompt →
- Segmented ControlAn iOS-style pill switch whose highlight slides between options.Create a React + Tailwind + Framer Motion "segmented control" component named SegmentedControl (an iOS-style tab/pill switch). Full prompt →
- Confetti Burst ButtonA button that scatters a quick burst of confetti particles on click.Create a React + Tailwind "confetti burst button" component named ConfettiButton. Full prompt →
- Circular Progress RingAn SVG progress ring whose fill and centered percentage count up together on scroll into view.Create a React + Framer Motion "circular progress ring" component named ProgressRing. Full prompt →
- Draggable Range SliderA custom-styled slider with a drag handle and a value tooltip while dragging.Create a React + Tailwind "draggable range slider" component named RangeSlider. Full prompt →
- 3D Flip CardA card that flips on a real Y-axis rotation to reveal a back face.Create a React + Tailwind + Framer Motion "3D flip card" component named FlipCard. Full prompt →
- Magnetic Nav DockA macOS-style dock where icons magnify based on real distance from the cursor.Create a React + Tailwind + Framer Motion "magnetic dock" component named MagneticNavDock, replicating the macOS dock magnification effect. Full prompt →
- Animated CheckboxA checkbox whose checkmark draws itself in as a real SVG path animation.Create a React + Tailwind + Framer Motion "animated checkbox" component named AnimatedCheckbox. Full prompt →
- Image Comparison SliderA draggable before/after divider that reveals one image over another.Create a React + Tailwind "before/after image comparison slider" component named ImageComparisonSlider. Full prompt →
- Ripple Click EffectA Material-style ripple that expands from the exact click point.Create a React + Tailwind + Framer Motion "ripple click effect" button named RippleButton, Material Design style. Full prompt →
- Floating Label InputA text input whose label floats from placeholder position into a caption on focus.Create a React + Tailwind "floating label input" component named FloatingLabelInput. Full prompt →
- Animated Tabs IndicatorA tab row where the active-state highlight slides between tabs instead of popping.Create a React + Tailwind + Framer Motion "animated tabs with sliding indicator" component named AnimatedTabs. Full prompt →
- Morphing Hamburger IconA three-line menu icon that morphs smoothly into an X.Create a React + Tailwind + Framer Motion "morphing hamburger icon" button named MorphingMenuButton. Full prompt →
- Expandable Search BarA search icon that smoothly expands into a full text input on click.Create a React + Tailwind + Framer Motion "expandable search bar" component named ExpandableSearchBar. Full prompt →
- Interactive Star RatingA 5-star rating control with hover preview and a springy fill pop.Create a React + Tailwind + Framer Motion "interactive star rating" component named StarRating. Full prompt →
- Marquee TickerAn infinite scrolling strip of words or logos that pauses when you hover it.Create a React + Tailwind "marquee ticker" component named MarqueeTicker. Full prompt →
- Tilt CardA 3D card that tilts toward the cursor with spring physics.Create a React + Tailwind + Framer Motion "tilt card" component named TiltCard. Full prompt →
- Magnetic ButtonA button whose label leans toward the cursor with a springy pull.Create a React + Tailwind "magnetic button" component named MagneticButton. Full prompt →
Sections prompts
All sections, free and Pro- Dusk Set FooterA footer that sets like the sun: as it scrolls in, a grained halo sinks toward a hairline horizon, warming from gold through rose to ember, behind a giant italic serif wordmark.Build a React + Tailwind footer, `DuskFooter({ brand, line, columns, legal, glow, dusk })`, that sets like the sun as it scrolls in. Full prompt →
- Horizon Light FooterA footer whose giant wordmark is lit from below by a horizon that is also a signal: a latency trace lit where the pointer is, with a request pulse that runs it every few seconds and lights the letters as it passes.Build a React + Tailwind footer, `HorizonLightFooter({ brand, columns, status, legal, accent, wordmark, pulse })`, on #050505. Full prompt →
- Warning Tape FooterA neo-brutalist footer under a strip of hazard tape you can grab and throw on its slow 48-second crawl, a sign-up that stamps the tape, and a giant wordmark whose letters press down onto their own ink plates.Create a React + Tailwind v4 footer, WarningTapeFooter: a neo-brutalist footer under a strip of hazard tape you can grab and throw, whose sign-up stamps the tape, and whose giant wordmark is a row of keys that press onto their own ink… Full prompt →
- Bento Footer GridA bento footer whose tiles are live: a 90-day uptime strip you can read day by day, a back-to-top ring that fills as you scroll, a newsletter that widens across its row as its neighbours reflow, and a wordmark that rises into its crop.Create a React + Tailwind v4 client component, BentoFooterGrid: a site footer set as dark bento tiles whose tiles are live: a 90-day uptime strip you can read day by day, a back-to-top ring that fills with scroll progress, a newsletter… Full prompt →
- Glass Tint FooterA liquid-glass footer slab that rises over the section above as you scroll in, its meniscus edge sloshing on fast scrolls, with a pointer light, a droplet gliding between links and frost re-tinted to that section.Create a React + Tailwind v4 client component, GlassTintFooter: a liquid-glass footer slab that rises over the bottom of the section above it as it scrolls into view, with a liquid top edge that sloshes when you scroll fast, a pointer… Full prompt →
- Hours Poster SectionOpening hours set as a poster — days hanging off the edge, closed rows struck through, today banded in the one accent — with an open/closed line on the shop's clock.Create a React + Tailwind (v4) component named HoursPoster: a small business's opening hours set as a typographic poster, with today's row highlighted and a live "Open now / Closed" status computed on the shop's own clock. Full prompt →
- Scroll-Linked Image Mask RevealAn image whose circular clip-path mask grows and shrinks in lockstep with scroll.Create a React + Tailwind + Framer Motion "scroll-linked circular mask reveal" component named ScrollLinkedImageMaskReveal. Full prompt →
- Vertical Timeline RevealA scroll-triggered vertical timeline whose dots and cards reveal in sequence.Create a React + Tailwind + Framer Motion "vertical timeline" component named VerticalTimelineReveal. Full prompt →
- Animated Stat GridA row of stat counters that count up together the moment they scroll into view.Create a React + Tailwind + Framer Motion "animated stat grid" component named AnimatedStatGrid. Full prompt →
- Stacked Type HeroOversized, tightly-stacked headline words that reveal in on mount — big type as sculpture.Create a React + Tailwind + Framer Motion "stacked type hero" section named StackedTypeHero. Full prompt →
Patterns prompts
All patterns, free and Pro- Hanging Label InputA contact form whose numbered labels hang one gutter off the lattice and step into line in 160ms when you use the field; the third row breaks by the rule, and it only claims to send when it has a handler.Build a React + Tailwind form, `HangingLabelInput({ title, budgets, labels, button, success, onSubmit, className })`. Full prompt →
- Gummy Type InputAn email field whose letters drop in and land: each typed letter falls from a little above, stretched as it falls and squashed as it lands, while the real input underneath keeps the caret, selection and autofill.Build a React + Tailwind form, `GummyTypeInput({ label, placeholder, button, success, onSubmit, className })`. Full prompt →
- Wake Time WheelSet the alarm on a pair of wheels: hours and minutes are snap-scrolling columns with momentum whose rows turn away in perspective around a lens, each a keyboard spinbutton, with the time the sunrise starts beneath.Build a React + Tailwind form, `WakeTimeWheel({ label, defaultValue, step, sunrise, name, submitLabel, onSubmit, className })`. Full prompt →
- Dither Drop InputDrop an image and see it dithered right there, with CSS alone: choose the cell size and the ink, set the exposure, and the request URL for that output builds as you go; submitting copies it.Build a React + Tailwind form, `DitherDropInput({ label, hint, endpoint, maxBytes, onSubmit, className, style })`. Full prompt →
- Detent Dial InputA number set by turning a CSS-3D dial: drag round it and it steps through detents, springing onto each while its copper marker ticks; a real slider with full keyboard control that submits in a form.Build a React + Tailwind input, `DetentDialInput({ label, min, max, step, value, defaultValue, onChange, format, detents, finish, size, name, hint, className })`. Full prompt →
- Name Badge InputA name field that sets your name on a pass as you type: each new letter lands loud in the accent and springs into place, a deleted one collapses to a hairline, and the name stays flush across the badge.Build a React + Tailwind form pattern, `NameBadgeInput({ onSave, label, placeholder, event, place, pass, number, defaultValue, maxLength, submitLabel, palette, tone, className })`. Full prompt →
- Aurora Glow InputA waitlist field that lights like the sky: focus raises a two-hue bloom and lights the rim, every keystroke sends a rose ripple from the caret, and joining sweeps the whole palette once.Build a React + Tailwind form, `AuroraGlowInput({ onJoin, label, placeholder, cta, done, failed, note, palette })`; onJoin is required and receives the trimmed address. Full prompt →
- Aura Booking PickerA booking picker in three quiet steps, treatment, day and time, where the chosen time blooms into a grained halo, and a request that needs your handler before it confirms anything.Build a React + Tailwind form, `AuraBookingPicker({ treatments, start, days, closed, times, isTaken, onRequest, done, failed, tone, glow })`, a booking picker where the chosen time blooms into light. Full prompt →
- Chrome Rim InputAn email field in a pill with a chrome rim: each keystroke sends two ripples of light racing round the rim from the caret, a light laps it while sending, and success pours the pill into a round chrome drop with a check.Build a React + Tailwind form, `ChromeRimInput({ label, placeholder, action, onSubmit, done, failed, finish })`: an email field in a pill with a chrome rim. Full prompt →
- Deploy Log InputAn email field that answers with a streaming log: on submit, short lines stream under it with spinners turning into checks while a beam of light runs along its top edge, and the last line waits for your handler.Build a React + Tailwind form, `DeployLogInput({ label, placeholder, button, steps, done, note, onSubmit, accent, stepMs })`: one email field that answers with a streaming log. Full prompt →
- Black Border FormNeo-brutalist form fields in 3px ink: focus presses a field into its shadow, and errors are stamped on as tilted black tags. The browser's own validation, a posting form and a received stamp.Create neo-brutalist React + Tailwind form fields that press in when used and stamp their errors on: export BlackBorderField, BlackBorderCheck and BlackBorderForm (with their Props types and BlackBorderMessages). Full prompt →
- Widget Reorder InputA "customise your dashboard" panel: drag or keyboard reorder, show and hide switches, a live miniature of the result, and save, cancel and reset.Create a React + Tailwind v4 client component, WidgetReorderInput: a "customise your dashboard" panel in a dark bento kit's utility register, with drag and full keyboard reorder, show and hide switches, a live miniature of the result, and… Full prompt →
- Glass Focus FieldA liquid-glass input whose rim notices the pointer before focus, thickens outward from where you click, ripples from the caret with every keystroke and clouds its frost on an error.Create a React + Tailwind client component, GlassField: a liquid-glass text field that reacts before, during and after typing. Before focus its rim notices the pointer; focus thickens the glass outward from the point you clicked instead… Full prompt →
- Link Peek PreviewAn index list that floats a velocity-tilted preview card beside the pointer.Create a React + Tailwind + Framer Motion component named HoverLinkPeek — an editorial link list that floats an image preview beside the pointer. Full prompt →
- Expanding Panel RowA row of panels where the hovered one grows and its neighbours compress.Create a React + Tailwind component named HoverExpandPanels — a horizontal accordion of image panels. Full prompt →
- Drag Inertia CarouselA rail you can throw — it projects the momentum and settles on the nearest slide.Create a React + Tailwind + Framer Motion component named DragInertiaCarousel — a draggable rail that you can throw and that settles on the nearest slide. Full prompt →
- Cursor Mask RevealThe pointer cuts a soft hole through one layer to expose a different one beneath.Create a React + Tailwind component named CursorMaskReveal — the pointer punches a hole through a top layer to reveal a different layer underneath. Full prompt →
- Kanban Drag ColumnsA mini kanban board where cards drag both within and across columns.Create a React + Tailwind + Framer Motion "kanban board with cross-column drag" component named KanbanDragColumns. Full prompt →
- Testimonial CarouselAn auto-advancing quote carousel with directional slide transitions.Create a React + Tailwind + Framer Motion "testimonial carousel" component named TestimonialCarousel. Full prompt →
- Hide On Scroll NavbarA navbar that slides away on scroll-down and reappears on scroll-up.Create a React + Tailwind + Framer Motion "hide on scroll navbar" component named HideOnScrollNavbar. Full prompt →
- Searchable FAQ AccordionA filterable FAQ list where each answer expands independently.Create a React + Tailwind + Framer Motion "searchable FAQ accordion" component named SearchableFaqAccordion. Full prompt →
- Command PaletteA Cmd+K style searchable command menu with a filtered live list.Create a React + Tailwind + Framer Motion "command palette" (Cmd+K menu) component named CommandPalette. Full prompt →
- Copy Code SnippetA dark code block with a one-click copy button that confirms itself.Create a React + Tailwind "copyable code snippet" component named CopyCodeSnippet. Full prompt →
- Toast Notification StackA queue of toast notifications that stack, reflow, and auto-dismiss independently.Create a React + Framer Motion "toast notification stack" pattern — a useToasts hook + ToastStack renderer. Full prompt →
- Sticky Scroll StackCards that pin and stack on top of each other as you scroll past.Create a React + Tailwind + Framer Motion "sticky scroll stack" pattern named StickyScrollStack. Full prompt →
- 3D Card CarouselCards mounted on a rotating 3D ring — the active one faces forward, others recede.Create a React + Tailwind + Framer Motion "3D card carousel" component named CardCarousel3D. Full prompt →
- Draggable Sortable ListA drag-handle-driven list that reorders with a smooth layout swap.Create a React + Tailwind + Framer Motion "draggable sortable list" component named SortableList. Full prompt →
- Draggable Bottom Sheet ModalA modal sheet you can drag down to dismiss, with a distance + velocity threshold.Create a React + Tailwind + Framer Motion "draggable bottom sheet" modal component named BottomSheet. Full prompt →
- Spotlight Card GridA card grid with a soft red spotlight that follows the cursor across it.Create a React + Tailwind "spotlight card grid" pattern named SpotlightGrid. Full prompt →
- Swipe Card StackA draggable deck of cards you flick away to cycle through, Tinder-style.Create a React + Framer Motion "swipe card stack" pattern named SwipeCardStack. Full prompt →
Assets prompts
All assets, free and Pro- ASCII Halftone CanvasTurns any canvas drawing into live ASCII art, sampled one pixel per glyph.Create a React + Tailwind component named AsciiHalftoneCanvas — renders anything drawable on a canvas as animated ASCII art. Full prompt →
- Masonry Image Hover GridA CSS-columns masonry gallery with a scale + caption reveal on hover.Create a React + Tailwind + Framer Motion "masonry image hover grid" component named MasonryImageHoverGrid. Full prompt →
- Page Loading BarAn nprogress-style top-of-page bar that eases toward completion, never stalling.Create a React + Tailwind + Framer Motion "top-of-page loading bar" (nprogress-style) pattern: a `usePageLoadingBar` hook plus a `PageLoadingBar` display component. Full prompt →
- Audio Wave VisualizerA bouncing equalizer bar animation for audio/podcast/music UI.Create a React + Tailwind + Framer Motion "audio equalizer bar visualizer" component named AudioWaveVisualizer. Full prompt →
- Skeleton Shimmer LoaderLoading-state placeholder blocks with a light sweep animating across them.Create a React + Tailwind "skeleton shimmer loader" asset named SkeletonShimmer. Full prompt →
Backgrounds prompts
All backgrounds, free and Pro- Punch Card FieldA background of 80-column punch cards whose holes spell real text in Hollerith code. Holes are punched in column by column on arrival; point at a column to decode it.Create a React + Tailwind background, PunchCardField: a neo-brutalist field of 80-column punch cards whose holes spell real text in Hollerith code, with children rendered on top. Full prompt →
- Signal FieldA machined dot grid lit by slow waves of light, with a pointer lens and click ripples.Create a React + Tailwind component named SignalField: a full-bleed canvas background of small square dots on a fixed grid, lit by slow waves of light, with a pointer lens and click ripples. Full prompt →
- Window Light DriftAfternoon sun through a window, crossing a plaster wall over ninety seconds — and your pointer casts a shadow in it.Create a React + Tailwind component named WindowLightDrift: a full-bleed canvas background of afternoon sunlight through a window, drifting slowly across a plaster wall, with the pointer casting a soft shadow in the light. Full prompt →
- Concrete Wall TextureA seamless procedural concrete surface drawn once to canvas and blended over anything.Build a procedural concrete/plaster surface in React + Tailwind named ConcreteWallTexture — a canvas overlay that sits over children and gives them a poured-concrete surface. Full prompt →
- Beam Sweep BackdropSlow conic light beams rotating behind content, CSS-only and compositor-friendly.Create a React + Tailwind component named BeamSweepBackdrop — slow rotating light beams behind page content. Full prompt →
- Pointer Warp Dot FieldA canvas dot grid that bulges and brightens away from the cursor.Create a React + Tailwind component named PointerWarpDotField — a canvas dot grid that bulges away from the cursor. Full prompt →
- CRT Scanline OverlayScanlines, aperture grille, rolling refresh and vignette over any content.Create a React + Tailwind component named CrtScanlineOverlay — a CRT monitor overlay laid over arbitrary children. Full prompt →
- Animated Gradient Border BeamA light beam that continuously travels around a card's border.Create a React + Tailwind "animated border beam" card component named BorderBeamCard. Full prompt →
- Liquid Blob Cursor FollowA soft blurred blob that trails the cursor with spring-smoothed lag.Create a React + Tailwind + Framer Motion "liquid blob cursor follow" component named LiquidBlobCursor. Full prompt →
- Grain OverlayA subtle animated film-grain texture layered over any section via canvas.Create a React "grain overlay" background component named GrainOverlay. Full prompt →
Text Effects prompts
All text effects, free and Pro- Edge Invert HeadlineA caps headline that inverts exactly at the edges of the plates under it; drag a plate and the inversion follows 1:1, then snaps to a lattice cell, and on column 3, 6 or 9 the plate breaks by the rule.Build a React + Tailwind text effect, `EdgeInvertHeadline({ text, plates, as, tone, size, measure, hint, className, style })` where plates are lattice cells { col, row }. Full prompt →
- Squish Letter HeadingA heading whose letters squash under the pointer and push their neighbours up: each letter keeps its area as it squashes, springs back with one overshoot, and the line ripples behind the pointer before settling to crisp type.Build a React + Tailwind text effect, `SquishLetterHeading({ text, accent, as, size, className, style })`. Full prompt →
- Sundial Shadow HeadingA heading whose letters cast soft shadows that swing like a sundial as the page scrolls: the sun crosses with the scroll, the long shadows turn from right to left, and a faint warm band of light slides across the ink.Build a React + Tailwind heading, `SundialShadowHeading({ lines, as, progress, depth, className, style })`. Full prompt →
- ASCII Resolve HeadingA heading that resolves from ASCII into type: its own letterforms redrawn in shape-matched glyphs step from coarse to fine as it comes into view, then a lens under the pointer shows the glyphs again.Build a React + Tailwind heading, `AsciiResolveHeading({ lines, as, glyph, lens, progress, className, style })`. Full prompt →
- Anamorphic HeadingA heading that only reads from the right angle: its letters stand at different depths, scaled so they line up from straight ahead, and the view swings round to square as it scrolls in.Build a React + Tailwind heading, `AnamorphicHeading({ lines, as, depth, angle, progress, className, style })`. Full prompt →
- Axis Scrub HeadingA heading written by the scroll: as it rises through the view a wave runs through its letters from hairline to a loud accent peak to its set weight, and scrolling back unwrites it.Build a React + Tailwind heading, `AxisScrubHeading({ lines, as, flush, progress, palette, tone, className, style })`. Full prompt →
- Aurora Drift TextDisplay type filled with aurora light: three bands drift through the letters on slow loops, ray threads slide through them, and the brightest band leans toward the pointer when it comes near.Build a React + Tailwind heading, `AuroraDriftText({ text, as, palette, align, className, style })`. Full prompt →
- Veil Resolve HeadingA serif heading that arrives out of soft light: each word condenses from a blur into focus with an 80ms stagger while a glow blooms behind the words and fades as they sharpen.Build a React + Tailwind heading, `VeilResolveHeading({ text, as, tone, glow, align })`, a serif heading whose words condense out of soft light. Full prompt →
- Pour Fill HeadingA heading that starts as an empty mould and fills with liquid chrome as it scrolls into view, its surface a meniscus with a hot line of light that sloshes with scroll speed and settles.Build a React + Tailwind heading, `PourFillHeading({ text, as, finish, level, align })`, that fills with liquid chrome. Full prompt →
- Slit Light HeadingA heading lit by a narrow slit of light that crosses it as it scrolls into view: letters under the slit burn white, letters it has passed stay lit, letters ahead wait in the dark.Build a React text effect, `SlitLightHeading({ children, as, accent, scrollRoot, className, style })`, that stacks three copies of a heading. Full prompt →
- Weight Slam TextDisplay type whose weight slams instead of easing: letters jump 400 → 650 → 900 in two hard steps, left to right like a row of stamps, and let go in three.Create a React + Tailwind text effect, WeightSlamText: neo-brutalist display type whose weight slams instead of easing. Each letter jumps from its rest weight to heavy in two hard steps inside 80ms (transition font-weight 80ms steps(2… Full prompt →
- Spec Numeral TileA big bold numeral in a spec-sheet voice whose digits roll into place like an odometer, set in a hairline bento tile.Create a React + Tailwind client component file exporting SpecNumeral and SpecNumeralTile: a big numeral in a bento spec-sheet voice whose digits roll into place like an odometer the first time it scrolls into view. Full prompt →
- Glass Etch TextReal, selectable heading text rendered as glass: a lit bevel, a graduated rim and a hairline colour fringe, raised or etched in.Create a React + Tailwind client component, GlassEtchText: real HTML heading text rendered as glass by an SVG filter, in a "raised" (glass letters on the page) or "etched" (letters cut into glass) cut. Full prompt →
- Marker Highlight TextA felt-tip highlighter stroke with a ragged edge that draws itself behind a phrase when it scrolls into view.Create a React + Tailwind component named MarkerHighlight: an inline span that draws a felt-tip highlighter stroke behind its children when they scroll into view. Full prompt →
- Slice Shear HoverDisplay type cut into horizontal bands that fan apart under the pointer.Create a React + Tailwind component named HoverSliceShear — oversized display text that cuts into horizontal bands and shears apart on hover. Full prompt →
- Weight Wave TextPer-character variable font weight that swells around the pointer and drifts when idle.Create a React + Tailwind component named WeightWaveText — a headline whose per-character font weight swells around the pointer. Full prompt →
- Extruded Type TiltDisplay type with a solid extrusion that swings around as the pointer moves.Create a React + Tailwind component named ExtrudedTypeTilt — oversized display text with a solid extrusion that re-orients toward the pointer. Full prompt →
- Typewriter TextText that types itself out character by character, then cycles to the next phrase.Create a React "typewriter text" component named TypewriterText. Full prompt →
- Glitch Text HoverAn RGB-split, jittery glitch effect on text when you hover it.Create a React + Tailwind "RGB-split glitch text" hover effect component named GlitchText. Full prompt →
- Rotating Word Swap HeadlineA headline where one word auto-cycles with a vertical odometer-style swap.Create a React + Tailwind + Framer Motion "rotating word swap" headline component named RotatingWordSwap. Full prompt →
- Scramble TextText that decodes from random characters into its real word on hover.Create a React "scramble text" hover effect component named ScrambleText. Full prompt →
- Odometer CounterA stat number that rolls up from zero to its target the moment it's in view.Create a React + Framer Motion "odometer counter" text-effect component named OdometerCounter. Full prompt →
Heroes prompts
All heroes, free and ProAnimations prompts
All animations, free and Pro- Rule Handoff FlipThe kit's rule for any list: items become plates on the lattice and every third breaks; filter, sort or add and everything moves from where it was in 380ms while the break passes to whichever item is now third.Build a React component, `RuleHandoffFlip<T>({ items, getKey, render, every, span, spanPhone, surface, ground, color, pad, label, className })`, and export its parts: `bgBreaks(index, count, every)`, `BgPlate` and `useRuleFlip(ref, key)`. Full prompt →
- Squish FlipA list whose items squash and stretch as they move: reorder, filter or add and each item travels to its new place stretched along its path by its speed, squashes as it lands, and settles; new items pop in.Build a React component, `SquishFlip<T>({ items, getKey, render, className, itemClassName, label })`, rendering a flex-wrap <ul> of <li>s. Full prompt →
- Scrub Mask RevealA plate that opens exactly with the scroll: its rounded frame widens from a fifth in on each side to full while the picture inside eases the other way so it seems to stay still, bound with no easing, with a hairline that fills.Build a React + Tailwind primitive, `ScrubMaskReveal({ children, inset, radius, rail, progress, className, style })`. Full prompt →
- Bayer DissolveAn ordered-dither transition: a new state prints in over the old one in 8x8 Bayer order while the screen refines from coarse cells to fine, or prints in from the ground on first view.Build a React primitive, `BayerDissolve({ items, index, reveal, duration, cell, refine, className, style })`. Full prompt →
- Assemble RevealA reveal where parts assemble in 3D: each item starts at its own offset and turn deep in perspective and flies home on a spring with a slight overshoot, one after another, as it comes into view.Build a React + Tailwind primitive, `AssembleReveal({ items, stagger, distance, once, play, className, itemClassName, style })`. Full prompt →
- Glyph Axis StaggerThe kit's rebuild as a primitive: split any text into letters and spring each one between two settings of the face, a fixed delay apart, in the order you choose, on view, on hover or on command.Build a React + Tailwind primitive, `GlyphAxisStagger({ text, as, from, to, trigger, play, once, stagger, order, flash, palette, tone, className, style })`. Full prompt →
- Aurora Ribbon CursorThe pointer paints a small aurora: a ribbon of light coloured from the indigo fringe to rose that fades like the sky, sending short rays up from every point so the trail reads as a curtain.Build a React + Tailwind wrapper, `AuroraRibbonCursor({ children, palette, life, width, rays, layer, attract, className, style })`. Full prompt →
- Breath Pacer RingA breathing guide in soft light: a grained halo swells as you breathe in and settles as you breathe out, a thin ring traces each phase and the seconds count down; it starts only when asked.Build a React + Tailwind component, `BreathPacer({ inhale, hold, exhale, cycles, tone, glow, size, labels })`, a breathing guide in soft light. Full prompt →
- Chrome Pour RevealA reveal that casts its content in liquid chrome: molten metal pours down over the space with drips racing ahead and merging into the sheet, then cools away from the top behind a hot seam of light.Build a React + Tailwind wrapper, `ChromePourReveal({ children, delay, radius, drips, finish })`, that reveals its content by pouring liquid chrome over it. Full prompt →
- Beam ConnectorA hairline beam between any two elements, routed with rounded right-angle elbows, that carries a pulse of light once per cycle and lands with a flash at the far end.Build a React primitive, `BeamConnector({ containerRef, from, to, fromSide, toSide, accent, duration, delay, lane, radius, active })`, that draws a beam between two elements inside a relatively positioned container. Full prompt →
- Glass Morph PopoverA popover that grows out of its button as a drop of liquid glass, stretches toward its place and settles flat, then drains back the same way.Create a React + Tailwind client component, GlassMorphPopover: a liquid-glass popover that grows out of its trigger as a droplet and settles into a flat panel. Full prompt →
- Pointer Parallax SceneA depth system where layers separate under the pointer from one shared motion source.Create a React + Tailwind + Framer Motion parallax system: PointerParallaxScene (the container) plus ParallaxLayer (a child). Full prompt →
- FLIP Grid ReorderA filterable grid whose tiles travel to their new positions instead of snapping.Create a React + Tailwind + Framer Motion component named FlipGridReorder — a filterable grid whose tiles glide to their new positions. Full prompt →
- Scroll Card DealA pile of cards that fans out symmetrically as its section crosses the viewport.Create a React + Tailwind + Framer Motion component named ScrollCardDeal — a stack of cards that deals outward into a fan as the user scrolls. Full prompt →
- Velocity Marquee RailA marquee that accelerates with scroll speed and flips direction when you scroll back.Create a React + Tailwind + Framer Motion component named VelocityMarqueeRail — a marquee whose speed and direction are driven by scroll. Full prompt →
- Path Follow ScrollA marker that rides an SVG curve on scroll, banking through the bends.Create a React + Tailwind + Framer Motion component named PathFollowScroll — a marker that travels along an SVG path as the user scrolls, with the path drawing in behind it. Full prompt →
The 217 Pro entries carry their own prompts too, unlocked with Pro. Every Pro entry still has a live preview you can use first.