unsloppablelibraryMotion should explain, then get out of the way.
Text Reveal
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/text-reveal.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.
DESIGN SCORE
0/100
Number Ticker
A factual number transition that never fabricates or obscures its final value.
Kinetic Button
A restrained magnetic action that responds to intent and stays conventional on touch devices.
AKAvery KimReady
MRMina RaoReview
JLJon LeeQueued
Spotlight
Pointer-responsive illumination for one meaningful product artifact, with no React render loop.
SCANS TODAY1,204
Border Trace
A single traveling highlight for active or inspectable surfaces, not a neon border on every card.
ReactTypeScriptMotionTailwindshadcn/uiNext.js
ReactTypeScriptMotionTailwindshadcn/uiNext.js
Marquee
A pausable, mask-faded content rail for short repeated signals and compact labels.
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.
- Argument
- Evidence
- Motion
- Proof
- Close
Scroll Progress
A contained reading instrument with progress, percentage, and optional section milestones.
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.
Magnetic Button
A cursor-attracted action with separate spring pull for the shell and label.
Live critiqueFlag issues while scanning
Elastic Toggle
A semantic switch whose thumb stretches, overshoots, and settles into state.
Liquid Ripple Button
A press creates a liquid response from the exact pointer coordinate.
Open navigation
Morph Icon Button
One set of strokes springs continuously between menu and close states.
Release to cancel
Hold to Confirm
A consequential action completes only after visible, uninterrupted press intent.
How does this direction feel?
Gooey Reaction Bar
Reactions merge as one material and spring apart when selected.
Tactile Segmented Control
A shared selection surface morphs between tabs and depresses under intent.
Magnetic Cursor Button
A local cursor follower latches to an action while the shell answers with spring weight.
Directions
Spring Stepper
A numeric stepper rolls values in the direction of change with bounded spring motion.
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 ANALYSIS
86Design confidence
ReadyTilt Spotlight Card
A product surface tilts toward the pointer while a radial light reveals its depth.
Design score
86/100
Ready to shipSpring Tabs
A per-instance shared indicator morphs between accessible tabs without cross-group collisions.
Physics Dock
Dock icons magnify by cursor distance through shared, leak-free spring configuration.
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.
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.
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.
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.
86OF 100
42
Progress Ring
An SVG arc fills once while exposing its verified value immediately.
WEEKLY SCANS47
REJECTED CANDIDATES5
Sparkline
A compact trend line draws once from real, labelled measurements.
Unslop my landing page
Word Swap
Rotating words crossfade while the slot animates to each width, so the line never jumps.
Arrow keys travel, Enter runs, Escape closes.
Command Palette
A grouped command overlay with search, keyboard travel, and escape.
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.
DESIGN SCORE92/100
Move the pointer across the card to light its edge.
Magic Card
A card whose border catches a single-hue light that follows the pointer, with a faint matching surface bloom.
U
Orbiting Circles
Nodes travelling along concentric orbits around a fixed center, each glyph staying upright as it circles.
NIGHTFALLQuiet by design.
Shooting Stars
A restrained meteor field: a few bright heads pulling tapering tails across a dark surface on staggered, deterministic schedules.
AMBIENT DEPTHMove your pointer.
Particle Field
An ambient field of fine particles that drift slowly and lean toward the pointer as a parallax whole.
- ✓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
Animated List
A feed that flows in one continuous, seamless loop, with a static accessible list underneath and top/bottom fades.
Globe
A rotating wireframe globe built from CSS 3D transforms with surface nodes that orbit with it — no WebGL and no per-frame JavaScript.
Mega Nav
A floating navigation bar with a glassy mega-menu — titled links beside a preview card — that opens on hover and keyboard focus.
Design that has to prove itself before it ships.
Highlighter
A marker highlight that sweeps in behind one phrase when it scrolls into view, growing on transform without reflowing text.
Ship something worth keeping.
Sparkles
Glints twinkle around a phrase while the words themselves stay perfectly still and legible.
$ npx shadcn add unsloppable
Cadence
A line that types itself out on a CSS steps animation, resting as the finished sentence.
SUMMIT
Reel
A headline whose letterforms are a window onto moving or still media.
Resolving handoffdesign-contract.json
Scramble
A phrase decodes into place one character at a time, seeded with the real sentence.
Pages reviewed128,740
Odometer
Digit reels roll mechanically into place, where Number Ticker interpolates the value as text.
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.
Charged to Visa ending 6411.
Ledger
A currency field that formats as you type, tracking minor units so the caret never jumps.
Relay
A form that advances one pane at a time, mounting only the active step so focus order stays honest.
Stable18 results
Sift
A search field where committed filters live inside the input as removable chips.
Consent
A cookie bar that treats declining as a first-class choice, with every optional category off until chosen.
- 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.
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.
Pricing page archived
Grace
The grace period after a destructive action, shown as a ring that empties before the change commits.
Bloom
Placeholders that resolve in sequence, so a block fills in from the top instead of pulsing as one slab.
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.
Lattice
A grid of small charts on one shared scale, so the set is genuinely comparable.
86Design score
Gauge
A radial meter with threshold bands, so a number arrives with the context to judge it.
412 scans in the last 30 weeks
Tempo
The contribution-graph pattern, with level owned by the caller rather than bucketed behind your back.
- 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.
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.
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.Bento
A feature bed on six columns, where every span divides cleanly so the grid never leaves a hole.
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.
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.
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.
Trusted by teams shipping every week
Roster
A wall of customer wordmarks, optionally travelling on a seamless loop.
Weight Shift
Text gains variable-font weight on intent while the line length stays exactly where it was.
Character Blur-In
One short phrase resolves out of a controlled per-character blur, exactly once.
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.
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.
Designed, not produced
Gradient Ink
A slow two-colour movement kept strictly inside the letterforms.
Strike Replace
An old claim is struck through before its replacement arrives.
Proof before polish
Echo Heading
A heading with an oversized ghost of itself behind, for depth at near-invisible opacity.
Optimistic Check
A tick that commits the instant it is pressed and rolls itself back if the write fails.
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.
All changes saved
Save Pulse
The quiet confirmation that an autosave landed, pulsing once and then receding.
Billed $24 monthly
Plan Switch
The billing-period switch, built as a real two-option radio group rather than a toggle.
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.
Waitlist Row
A single-field capture row that reports pending, accepted, and failed rather than only the first.
File Drop
A drop zone that is also a real file input, so dragging is the enhancement and never the only route.
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.
| 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.
Week 1
Hierarchy72
Motion66
Contrast58
Copy51
Spacing40
Bar Race
Ranked bars that slide to their new position as the series advances.
Rating Cluster
A star score shown with the sample size behind it, and partial stars clipped rather than rounded.
- 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.
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.
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.
Resolved
Pixel Dissolve
Content resolving through a grid of dissolving cells, scattered deterministically.
Unsloppable
Chromatic Edge
Chromatic aberration on a short string, as two offset colour ghosts behind clean ink.
Hover me
Contact Shadow
A grounded two-part shadow that widens and fades as the object rises.
Grain, not a tiled PNG
Noise Displacement
Film grain generated from SVG turbulence, so it never tiles and costs no request.
Intent Underlay
A nav where one pill travels between items instead of each item lighting up in place.
Copy Chip
A chip that copies its value and confirms it, including when the clipboard is denied.
px
Scrub Number
A number you can drag sideways to change, paired with a real input so it stays typeable.
- Contrast4 findings1
- Hierarchy2 findings2
- Spacing7 findings3
- Motion1 finding4
Reorder List
A list reorderable by keyboard as well as by drag, with each move announced.
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.
Hero subhead
Peel the corner to see what the contract found.
Peel Card
A card whose corner peels back to show what is underneath.
Move across this surface
Ghost Cursor
A soft marker trailing the pointer inside one surface, on a self-stopping loop.
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.
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.
Flick the frame up and down.
Contrast
Hierarchy
Spacing
Motion
Copy
Access
Scroll Velocity Skew
Content that leans with scroll speed and settles the moment scrolling stops.
Momentum Carousel
A carousel on native scroll snapping, so momentum and touch come from the platform.
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.
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.
Scan
Northwind landing
Design score 96, contract attached.
Window Stack
Browser windows stacked in depth, the front one focused, selectable by keyboard.
Zoom Lens
A magnifier that follows the pointer across an image, with no second request.
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.
Video Reveal Dialog
A poster that opens its video in a focus-trapped dialog, mounting the video only on open.
Terminal Session
A terminal transcript that plays back line by line, as real selectable text.
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.
The problem
Section Divider
A divider between sections beyond a bare rule, drawn with SVG so it stays crisp.
Footer Reveal
A footer fixed behind the page that the content slides up off to reveal, on sticky alone.
Aspect Stage
A wrapper that reserves a fixed aspect ratio, so media never shifts the layout as it loads.
Capture
Contract
Rebuild
Column Cascade
Columns that rise into place in sequence when the row scrolls into view.
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.
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 Embed Guard
A consent gate that loads a third-party embed only after the visitor asks for it.
Tally
A count from zero to one hundred, with a fill line rising through the numerals as it climbs.
Solari
A split-flap departure board that clacks one tile at a time into the word it is waiting on.
Iris
A camera aperture that twists open, holds, and closes again over a lit core.
Etch
A verification mark that draws itself, ring first and check second, then blooms once to confirm.
Aurora
A gradient mesh breathing behind a conic progress ring, crossed once by a single sheen.
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.