unsloppableLive / auto replayPauses on hover
Motion should explain, then get out of the way.
Unfurl
Word-level entrance choreography with natural wrapping and a static reduced-motion state.
Six books. Then you know your way around.
Every component ships as a working demo, every section is imported live out of a real template, and nothing enters the catalog on taste alone. Take a book down to see how any of that is arranged.
npx shadcn@latest add https://unsloppable.style/r/unfurl.json121 STABLE COMPONENTS
Every card is a working demo.
No Beta components appear here. If a component cannot pass overflow, interaction, console, and reduced-motion checks, it does not ship.
Live / auto replayPauses on hover
DESIGN SCORE
86/100
Reckon
A factual number transition that never fabricates or obscures its final value.
Live / auto replayPauses on hover
Kinetic Button
A restrained magnetic action that responds to intent and stays conventional on touch devices.
Live / auto replayPauses on hover
AKAvery KimReady
MRMina RaoReview
JLJon LeeQueued
Spotlight
Pointer-responsive illumination for one meaningful product artifact, with no React render loop.
Live / auto replayPauses on hover
SCANS TODAY1,204
Border Trace
A single traveling highlight for active or inspectable surfaces, not a neon border on every card.
Live / auto replayPauses on hover
ReactTypeScriptMotion & ScrollTailwindshadcn/uiNext.js
ReactTypeScriptMotion & ScrollTailwindshadcn/uiNext.js
Drift
A pausable, mask-faded content rail for short repeated signals and compact labels.
Live / auto replayPauses on hover
The grid recedes behind the message instead of competing with it.
Dot Field
A lightweight CSS material that adds scale without competing with foreground content.
Live / auto replayPauses on hover
- Argument
- Evidence
- Motion & Scroll
- Proof
- Close
Wick
A contained reading instrument with progress, percentage, and optional section milestones.
Live / auto replayPauses on hover
Device Frame
A neutral browser, phone, or tablet shell that presents real product content with an optional tab strip, loading state, and pointer-tracked glare.
Live / auto replayPauses on hover
Magnetic Button
A cursor-attracted action with separate spring pull for the shell and label.
Live / auto replayPauses on hover
Live critiqueFlag issues while scanning
Elastic Toggle
A semantic switch whose thumb stretches, overshoots, and settles into state.
Live / auto replayPauses on hover
Liquid Ripple Button
A press creates a liquid response from the exact pointer coordinate.
Live / auto replayPauses on hover
Open navigation
Morph Icon Button
One set of strokes springs continuously between menu and close states.
Live / auto replayPauses on hover
Release to cancel
Hold to Confirm
A consequential action completes only after visible, uninterrupted press intent.
Live / auto replayPauses on hover
How does this direction feel?
Gooey Reaction Bar
Reactions merge as one material and spring apart when selected.
Live / auto replayPauses on hover
Tactile Segmented Control
A shared selection surface morphs between tabs and depresses under intent.
Live / auto replayPauses on hover
Magnetic Cursor Button
A local cursor follower latches to an action while the shell answers with spring weight.
Live / auto replayPauses on hover
Directions
Spring Stepper
A numeric stepper rolls values in the direction of change with bounded spring motion.
Live / auto replayPauses on hover
Order summary
- Aeron ChairGraphite · Size B$1,395.00
- Monitor ArmMatte black$189.00
Total$1,584.00
Free returns within 30 days
Confetti Button
A success action that morphs to its confirmed state while real paper physics fall across the page.
Live / auto replayPauses on hover
LIVE ANALYSIS
86Design confidence
ReadyTilt Spotlight Card
A product surface tilts toward the pointer while a radial light reveals its depth.
Live / auto replayPauses on hover
Design score
86/100
Ready to shipSpring Tabs
A per-instance shared indicator morphs between accessible tabs without cross-group collisions.
Live / auto replayPauses on hover
Physics Dock
Dock icons magnify by cursor distance through shared, leak-free spring configuration.
Live / auto replayPauses on hover
ATMOSPHEREMade of marks, not a wash.
A single tiled screen drifts behind the type, so the motion stays on the compositor.
Halftone Field
A tiled halftone screen drifts behind content, building atmosphere from repeating marks.
Live / auto replayPauses on hover
ENTRANCEOnce, on arrival.
A sheen crosses the surface a single time, then leaves the card alone.
Light Sweep
A diagonal sheen crosses one surface a single time on entrance.
Live / auto replayPauses on hover
New in v3
Content that
arrives on cue.
A directional cut, not a generic fade — each element enters from where it belongs.
Read the storyDocs
Reveal Mask
Content slides out from behind a clipped edge, moving on transform alone.
Live / auto replayPauses on hover
Design law
Select a category to expand it in place.
Shared Layout Morph
A list row expands into detail while every shared element stays tracked.
Live / auto replayPauses on hover
86OF 100
42
Progress Ring
An SVG arc fills once while exposing its verified value immediately.
Live / auto replayPauses on hover
WEEKLY SCANS47
REJECTED CANDIDATES5
Sparkline
A compact trend line draws once from real, labelled measurements.
Live / auto replayPauses on hover
Unslop my landing page
Word Swap
Rotating words crossfade while the slot animates to each width, so the line never jumps.
Live / auto replayPauses on hover
Arrow keys travel, Enter runs, Escape closes.
Command Palette
A grouped command overlay with search, keyboard travel, and escape.
Live / auto replayPauses on hover
We send the audit here.
Field Focus Glow
A text field with a floating label, a contrast-safe focus glow, and inline validation that never shifts the layout.
Live / auto replayPauses on hover
DESIGN SCORE92/100
Move the pointer across the card to light its edge.
Lumen
A card whose border catches a single-hue light that follows the pointer, with a faint matching surface bloom.
Live / auto replayPauses on hover
U
Orrery
Nodes travelling along concentric orbits around a fixed center, each glyph staying upright as it circles.
Live / auto replayPauses on hover
NIGHTFALLQuiet by design.
Shooting Stars
A restrained meteor field: a few bright heads pulling tapering tails across a dark surface on staggered, deterministic schedules.
Live / auto replayPauses on hover
AMBIENT DEPTHMove your pointer.
Particle Field
An ambient field of fine particles that drift slowly and lean toward the pointer as a parallax whole.
Live / auto replayPauses on hover
- ✓Review approvedLanding audit · just now
- ↗New scan startedunsloppable.com
- !Proof flagged thinAdd one verified metric
- ✓Contract generatedsaas-calm-workspace
- ↗Handoff exported3 files · zip
- ✓Preview publisheddirection: refined brand
Tide
A feed that flows in one continuous, seamless loop, with a static accessible list underneath and top/bottom fades.
Live / auto replayPauses on hover
Terra
A rotating wireframe globe built from CSS 3D transforms with surface nodes that orbit with it — no WebGL and no per-frame JavaScript.
Live / auto replayPauses on hover
Mega Nav
A floating navigation bar with a glassy mega-menu — titled links beside a preview card — that opens on hover and keyboard focus.
Live / auto replayPauses on hover
Design that has to prove itself before it ships.
Highlight
A marker highlight that sweeps in behind one phrase when it scrolls into view, growing on transform without reflowing text.
Live / auto replayPauses on hover
Ship something worth keeping.
Kindle
Glints twinkle around a phrase while the words themselves stay perfectly still and legible.
Live / auto replayPauses on hover
$ npx shadcn add unsloppable
Keystroke
A line that types itself out on a CSS steps animation, resting as the finished sentence.
Live / auto replayPauses on hover
SUMMIT
Stencil
A headline whose letterforms are a window onto moving or still media.
Live / auto replayPauses on hover
Resolving handoffdesign-contract.json
Scramble
A phrase decodes into place one character at a time, seeded with the real sentence.
Live / auto replayPauses on hover
Pages reviewed128,740
Odometer
Digit reels roll mechanically into place, where Reckon interpolates the value as text.
Live / auto replayPauses on hover
Verify it is youWe sent a six-digit code to jeremy@studio.com
Vault
A one-time-code field built from real inputs, with auto-advance, paste-to-fill, and keyboard navigation.
Live / auto replayPauses on hover
Charged to Visa ending 6411.
Ledger
A currency field that formats as you type, tracking minor units so the caret never jumps.
Live / auto replayPauses on hover
Relay
A form that advances one pane at a time, mounting only the active step so focus order stays honest.
Live / auto replayPauses on hover
Stable18 results
Sift
A search field where committed filters live inside the input as removable chips.
Live / auto replayPauses on hover
Consent
A cookie bar that treats declining as a first-class choice, with every optional category off until chosen.
Live / auto replayPauses on hover
- Figma sync failedToken library is unreachable.
- Handoff link copied
- Contrast below targetHero subhead is 3.1:1.
- Scan finished18 findings across 4 pages.
Hover the pile to unroll it.
Stack
A burst of notifications collapses into one pile and unrolls into a readable list on hover.
Live / auto replayPauses on hover
All systems operational99.98%
Last 60 days
Vitals
A live status light that keeps its dot lit while a ring pulses out of it, with recent history alongside.
Live / auto replayPauses on hover
Pricing page archived
Grace
The grace period after a destructive action, shown as a ring that empties before the change commits.
Live / auto replayPauses on hover
Bloom
Placeholders that resolve in sequence, so a block fills in from the top instead of pulsing as one slab.
Live / auto replayPauses on hover
That scan did not finish
The capture stopped before the page settled. Nothing was saved, so retrying is safe.
Technical detail
GET /api/scan/northwind → 504 (gateway timeout)
attempts: 0Recover
An error state that leads with the way forward and holds its working state while the retry runs.
Live / auto replayPauses on hover
Lattice
A grid of small charts on one shared scale, so the set is genuinely comparable.
Live / auto replayPauses on hover
86Design score
Gauge
A radial meter with threshold bands, so a number arrives with the context to judge it.
Live / auto replayPauses on hover
412 scans in the last 30 weeks
Tempo
The contribution-graph pattern, with level owned by the caller rather than bucketed behind your back.
Live / auto replayPauses on hover
- Design score41→96+134%
- Contrast failures12→1-92%
- Time to first paint3.4→1.2-65%
Verdict
Paired before and after bars on one shared scale, with direction decided by what counts as better.
Live / auto replayPauses on hover
Design score96↑+12%vs. last scan
Bounce rate24%↓-18%Lower is better
Delta
One metric with its change and the shape behind it, where direction and sentiment are separate.
Live / auto replayPauses on hover
- Capture any pageOne URL in, a full design contract out.
- Score0 to 100, with the evidence.
- ContrastEvery pair checked.
- HandoffTokens and code, ready to paste.
Quilt
A feature bed on six columns, where every span divides cleanly so the grid never leaves a hole.
Live / auto replayPauses on hover
How a scan runs
- CaptureThe page is rendered and frozen, fonts and all.
- Read the contractContrast, hierarchy, spacing, and motion are measured.
- Rank findingsOrdered by what actually moves the outcome.
- RebuildA considered version, generated against the contract.
- Hand offTokens, code, and the evidence that produced them.
Spine
A timeline whose rail tracks the step being read, driven by observation rather than a scroll handler.
Live / auto replayPauses on hover
Nothing is retyped. The real page is frozen exactly as it shipped.
Every rule the page implicitly set for itself, made explicit.
A version that holds the contract instead of guessing at it.
The reasoning travels with the result.
Scroll inside the frame to fold the deck.
Fold
Cards that fold into a deck as the page passes them, on sticky alone with no scroll handler.
Live / auto replayPauses on hover
Generated
Analytics your team readsWelcome to our website. Click here to learn more about our product.Click here
Designed
RealtimeAnalytics your team readsDashboards, alerts, and reports in one calm workspace.Start free
Cleave
Two panes divided by a handle the reader can move, built on a native range input.
Live / auto replayPauses on hover
Trusted by teams shipping every week
Roster
A wall of customer wordmarks, optionally travelling on a seamless loop.
Live / auto replayPauses on hover
Weight Shift
Text gains variable-font weight on intent while the line length stays exactly where it was.
Live / auto replayPauses on hover
Character Blur-In
One short phrase resolves out of a controlled per-character blur, exactly once.
Live / auto replayPauses on hover
Nothing in a considered page happens by accident. Every rule the layout follows was decided once, written down, and then held to on every screen it ever renders on. That is the whole difference between a page that was designed and one that was merely produced.
Drop Cap
An editorial drop cap set on the correct optical baseline, with a sane fallback.
Live / auto replayPauses on hover
We stopped arguing about taste the week the contract started shipping with the review.
Quote Pull
A pull quote that gains a little presence as it reaches the reading centre.
Live / auto replayPauses on hover
Designed, not produced
Gradient Ink
A slow two-colour movement kept strictly inside the letterforms.
Live / auto replayPauses on hover
Strike Replace
An old claim is struck through before its replacement arrives.
Live / auto replayPauses on hover
Proof before polish
Echo Heading
A heading with an oversized ghost of itself behind, for depth at near-invisible opacity.
Live / auto replayPauses on hover
Optimistic Check
A tick that commits the instant it is pressed and rolls itself back if the write fails.
Live / auto replayPauses on hover
No scans yet
Point Unsloppable at a URL and the first design contract lands in about a minute.
Empty State
The state a surface holds before it has anything to show, led by the next action.
Live / auto replayPauses on hover
All changes saved
Save Pulse
The quiet confirmation that an autosave landed, pulsing once and then receding.
Live / auto replayPauses on hover
Billed $24 monthly
Plan Switch
The billing-period switch, built as a real two-option radio group rather than a toggle.
Live / auto replayPauses on hover
Studio$24/ month
For one designer shipping weekly.
- Unlimited scans
- Design contracts
- Figma handoff
Most pickedTeam$80/ month
For teams that review together.
- Everything in Studio
- Shared review queue
- Priority scans
Pricing Card
One pricing tier, where the featured plan is lifted without disarming the others.
Live / auto replayPauses on hover
Waitlist Row
A single-field capture row that reports pending, accepted, and failed rather than only the first.
Live / auto replayPauses on hover
File Drop
A drop zone that is also a real file input, so dragging is the enhancement and never the only route.
Live / auto replayPauses on hover
We stopped arguing about taste the week the contract shipped with the review.
It caught a contrast failure on a page we had already signed off twice.
The handoff is the part I did not expect to love. Tokens, straight out.
Testimonial Column
A column of quotes drifting slowly upward on a seamless loop.
Live / auto replayPauses on hover
| Feature | Studio | Team |
|---|---|---|
| Scans | Unlimited | Unlimited |
| Design contracts | Included | Included |
| Shared review queue | Not included | Included |
| Priority processing | Not included | Included |
Comparison Table
A feature comparison built as a real table with proper row and column headers.
Live / auto replayPauses on hover
Week 1
Hierarchy72
Motion & Scroll66
Contrast58
Copy51
Spacing40
Bar Race
Ranked bars that slide to their new position as the series advances.
Live / auto replayPauses on hover
Rating Cluster
A star score shown with the sample size behind it, and partial stars clipped rather than rounded.
Live / auto replayPauses on hover
- addedDesign contracts ship with every scan
Every rule the page set for itself, written down.
- improvedContrast checks now cover overlay text
- fixedHandoff no longer drops custom tokens
Changelog Feed
A release feed where the change kind is a word, not just a colour.
Live / auto replayPauses on hover
Frosted, not smudged
Blur, tint, and a lit edge, so the pane reads as material rather than a blur filter.
Glass Layer
A pane of frosted glass: backdrop blur, a tint with substance, and a lit top edge.
Live / auto replayPauses on hover
Move the pointer across this card
The lens tracks your cursor through custom properties, so nothing re-renders while it moves.
Refraction Hover
A lens that follows the pointer and bends what sits under it.
Live / auto replayPauses on hover
Resolved
Pixel Dissolve
Content resolving through a grid of dissolving cells, scattered deterministically.
Live / auto replayPauses on hover
Unsloppable
Chromatic Edge
Chromatic aberration on a short string, as two offset colour ghosts behind clean ink.
Live / auto replayPauses on hover
Hover me
Contact Shadow
A grounded two-part shadow that widens and fades as the object rises.
Live / auto replayPauses on hover
Grain, not a tiled PNG
Noise Displacement
Film grain generated from SVG turbulence, so it never tiles and costs no request.
Live / auto replayPauses on hover
Intent Underlay
A nav where one pill travels between items instead of each item lighting up in place.
Live / auto replayPauses on hover
Copy Chip
A chip that copies its value and confirms it, including when the clipboard is denied.
Live / auto replayPauses on hover
px
Scrub Number
A number you can drag sideways to change, paired with a real input so it stays typeable.
Live / auto replayPauses on hover
- Contrast4 findings1
- Hierarchy2 findings2
- Spacing7 findings3
- Motion & Scroll1 finding4
Reorder List
A list reorderable by keyboard as well as by drag, with each move announced.
Live / auto replayPauses on hover
Hold, right-click, or press Enter.
Long-Press Menu
A menu that opens on a long press, with a ring showing the hold, plus right-click and Enter.
Live / auto replayPauses on hover
Hero subhead
Peel the corner to see what the contract found.
Peel Card
A card whose corner peels back to show what is underneath.
Live / auto replayPauses on hover
Move across this surface
Ghost Cursor
A soft marker trailing the pointer inside one surface, on a self-stopping loop.
Live / auto replayPauses on hover
Scroll inside the frame.
Drifts slowly
Drifts the other way
Parallax Layer
A layer that drifts against the scroll, written straight to a custom property.
Live / auto replayPauses on hover
Scroll the second block into view.
Revealed by a curtain
Section Curtain
A section revealed by a curtain lifting off content that was always there.
Live / auto replayPauses on hover
Flick the frame up and down.
Contrast
Hierarchy
Spacing
Motion & Scroll
Copy
Access
Scroll Velocity Skew
Content that leans with scroll speed and settles the moment scrolling stops.
Live / auto replayPauses on hover
Momentum Carousel
A carousel on native scroll snapping, so momentum and touch come from the platform.
Live / auto replayPauses on hover
Continue to the next view with a morph where supported.
View Transition Link
A link that hands navigation to the View Transitions API where it exists, and stays an ordinary link where it does not.
Live / auto replayPauses on hover
The page is rendered and frozen, fonts and all.
Auto Play Sequence
A self-advancing sequence with a bar that fills over exactly the interval it holds.
Live / auto replayPauses on hover
Scan
Northwind landing
Design score 96, contract attached.
Window Stack
Browser windows stacked in depth, the front one focused, selectable by keyboard.
Live / auto replayPauses on hover
Zoom Lens
A magnifier that follows the pointer across an image, with no second request.
Live / auto replayPauses on hover
Design score0 to 100, with the evidence behind it.
ContrastEvery text pair checked against AA.
Primary actionOne clear next step per view.
Annotated Frame
A frame with numbered pins that explain what is in it.
Live / auto replayPauses on hover
Video Reveal Dialog
A poster that opens its video in a focus-trapped dialog, mounting the video only on open.
Live / auto replayPauses on hover
Terminal Session
A terminal transcript that plays back line by line, as real selectable text.
Live / auto replayPauses on hover
1
2
3
4
5
6
7
8
9
Masonry Flow
A masonry grid on real CSS columns, packing any-height tiles with no measuring loop.
Live / auto replayPauses on hover
The problem
Section Divider
A divider between sections beyond a bare rule, drawn with SVG so it stays crisp.
Live / auto replayPauses on hover
Footer Reveal
A footer fixed behind the page that the content slides up off to reveal, on sticky alone.
Live / auto replayPauses on hover
Aspect Stage
A wrapper that reserves a fixed aspect ratio, so media never shifts the layout as it loads.
Live / auto replayPauses on hover
Capture
Contract
Rebuild
Column Cascade
Columns that rise into place in sequence when the row scrolls into view.
Live / auto replayPauses on hover
Proof before polish
Nothing in a considered page happens by accident. Every rule the layout follows was decided once, written down, and then held to on every screen it renders on.
The measure stays near sixty characters no matter the viewport, which is the single biggest lever on legibility and the one most layouts skip entirely.
Reading Layout
A long-form column that caps its measure and lets figures bleed wide.
Live / auto replayPauses on hover
1import { GaugeMeter } from "@/components/open-ui/gauge-meter";23export function Score({ value }: { value: number }) {4 return (5 <GaugeMeter6 value={value}7 label="Design score"8 target={75}9 />10 );11}
Code Walkthrough
A code block whose lines highlight as you step through an explanation, staying copyable.
Live / auto replayPauses on hover
Live Embed Guard
A consent gate that loads a third-party embed only after the visitor asks for it.
Live / auto replayPauses on hover
Tally
A count from zero to one hundred, with a fill line rising through the numerals as it climbs.
Live / auto replayPauses on hover
Solari
A split-flap departure board that clacks one tile at a time into the word it is waiting on.
Live / auto replayPauses on hover
Iris
A camera aperture that twists open, holds, and closes again over a lit core.
Live / auto replayPauses on hover
Etch
A verification mark that draws itself, ring first and check second, then blooms once to confirm.
Live / auto replayPauses on hover
Aurora
A gradient mesh breathing behind a conic progress ring, crossed once by a single sheen.
Live / auto replayPauses on hover
Converge
Scattered particles fly in, seat themselves into a ring, hold, then disperse again.
STABILITY BAR
Proof before polish.
Concrete preview
The demo shows a real interface behavior, not a placeholder.
No hidden overflow
The card has to survive desktop and narrow viewports.
Reduced motion
Motion resolves to a useful final state.
Copyable source
Each component keeps a direct install command.
