textReveal
Character by character
504 components · 0 dependencies · MIT
Motion with technique in it
Not a folder of fades. Variable-font axes that bend to the pointer, words that morph letter by letter, carousels built on the browser's own scrolling, menus that actually trap focus.
- 504
- components
- 0
- dependencies
- 53
- modules, all copyable
- MIT
- take it and ship it
01Everything, listed
Everything, on one screen.
Every component and the attribute that drives it. Most of the kit needs no JavaScript at the call site at all.
Entrances
- reveal
data-rm-reveal
Text
- textReveal
data-rm-text - decrypt
data-rm-decrypt - glitch
data-rm-glitch - shiny
data-rm-shiny - countUp
data-rm-count - pressure
data-rm-pressure - morph
data-rm-morph - curve
data-rm-curve - odometer
data-rm-odometer - highlight
data-rm-highlight - outline
data-rm-outline - rollText
data-rm-roll - countdown
data-rm-countdown
Showpiece text
- typewriter
data-rm-type - waveText
data-rm-wave
Cursors
- cursor
js - target
js - crosshair
js - splash
js - magnetic
data-rm-magnetic - cartoonCursor
js - blobCursor
js - trailCursor
js - sayCursor
data-rm-say - spotlightCursor
js - arrowCursor
js - lensCursor
js
Cards
- spotlight
data-rm-spotlight - tilt
data-rm-tilt - border
data-rm-border - cardKit
data-rm-card-kit - layers
data-rm-layers - edgeLight
data-rm-edge - fan
data-rm-fan - cardParallax
data-rm-card-parallax
Surfaces
- beam
data-rm-beam - trail
data-rm-trail - glare
data-rm-glare - electric
data-rm-electric - blurEdge
data-rm-blur-edge - corners
data-rm-corners
Fields and decoration
- waves
js - retroGrid
js - dotGrid
js - grain
js - meteors
data-rm-meteors - sparkles
data-rm-sparkles - lamp
data-rm-lamp - beams
data-rm-beams - dots
data-rm-dots - stripes
data-rm-stripes - scanline
data-rm-scanline - mesh
data-rm-mesh - starfield
data-rm-stars
Texture
- rings
data-rm-rings - hexGrid
data-rm-hex - plusGrid
data-rm-plus - diagonals
data-rm-diagonals - topography
data-rm-topography - circuit
data-rm-circuit - vignette
data-rm-vignette - halftone
data-rm-halftone
Scroll
- parallax
data-rm-parallax - progress
data-rm-progress - horizontal
data-rm-horizontal - stack
data-rm-stack - scrub
data-rm-scrub - tracing
data-rm-tracing - flatten
data-rm-flatten - sticky
data-rm-sticky - skew
data-rm-skew - mosaic
data-rm-mosaic - zoomOut
data-rm-zoom-out - lineByLine
data-rm-lines-in - textMask
data-rm-text-mask - timeline
data-rm-timeline - splitScroll
data-rm-split-scroll - revealGrid
data-rm-reveal-grid - pinnedGallery
data-rm-pinned
More scroll
- scrollCounter
data-rm-scroll-count - scrollRotate
data-rm-scroll-rotate - scrollScale
data-rm-scroll-scale - scrollBlur
data-rm-scroll-blur - scrollColour
data-rm-scroll-colour - pinSteps
data-rm-pin-steps - scrollDraw
data-rm-scroll-draw - depthLayers
data-rm-scroll-depth - scrollSnapSections
data-rm-snap-sections - revealMaskScroll
data-rm-scroll-mask - marqueeScroll
data-rm-scroll-marquee - scrollGradient
data-rm-scroll-gradient - scrollSplit
data-rm-scroll-split - scrollZoomPin
data-rm-scroll-zoom - scrollTypeScale
data-rm-scroll-type
Media
- imageReveal
data-rm-image-reveal - pixelate
data-rm-pixel - hoverPreview
data-rm-preview - marquee
data-rm-marquee
Galleries
- carousel
data-rm-carousel - ring
data-rm-ring - deck
data-rm-deck - imageTrail
data-rm-image-trail - scratch
data-rm-scratch - dock
data-rm-dock - compare
data-rm-compare - panels
data-rm-panels - orbit
data-rm-orbit - ripple
data-rm-ripple - magnetLines
data-rm-lines - drag
data-rm-drag - shuffle
data-rm-shuffle - coverflow
data-rm-coverflow - thumbs
data-rm-thumbs - autoplay
data-rm-autoplay - wheel
data-rm-wheel - peek
data-rm-peek - ticker
data-rm-ticker - slideshow
data-rm-slideshow - masonry
data-rm-masonry - swipeStack
data-rm-swipe-stack - filmstrip
data-rm-filmstrip - hoverPeek
data-rm-hover-peek - polaroids
data-rm-polaroids - foldGallery
data-rm-fold - gridZoom
data-rm-grid-zoom - crossfade
data-rm-crossfade - parallaxGrid
data-rm-parallax-grid - tiltGrid
data-rm-tilt-grid - maskReveal
data-rm-mask-reveal - slats
data-rm-slats - zoomStrip
data-rm-zoom-strip - spiralGallery
data-rm-spiral - imageWall
data-rm-image-wall - flipGrid
data-rm-flip-grid - peelStack
data-rm-peel - focusGrid
data-rm-focus-grid - ribbon
data-rm-ribbon - contactSheet
data-rm-contact-sheet
Buttons
- fill
data-rm-fill - shimmer
data-rm-shimmer - spark
data-rm-spark - swap
data-rm-swap - confetti
js - underline
data-rm-underline - press
data-rm-press - halo
data-rm-halo - strokeDraw
data-rm-stroke - buttonKit
data-rm-btn
Navigation
- pill
data-rm-pill - gooey
data-rm-gooey - condense
data-rm-condense - overlay
data-rm-overlay - tabs
data-rm-tabs - scrollSpy
data-rm-spy - progressRing
data-rm-ring-progress - command
data-rm-command - sidebar
data-rm-sidebar - rail
data-rm-rail - bottomNav
data-rm-bottom - mega
data-rm-mega
Menu shapes
- circleNav
data-rm-circle-nav - curtainNav
data-rm-curtain-nav - hoverSpread
data-rm-hover-spread - breadcrumbs
data-rm-breadcrumbs - treeNav
data-rm-tree - splitNav
data-rm-split-nav - stackNav
data-rm-stack-nav - dotNav
data-rm-dot-nav
Things that open
- accordion
data-rm-accordion - flip
data-rm-flip - expand
data-rm-expand - lightbox
data-rm-lightbox
Chrome
- scrollbar
data-rm-scrollbar - dropdown
data-rm-dropdown - tooltip
data-rm-tooltip - toggle
data-rm-toggle - island
data-rm-island - sheet
data-rm-sheet - segmented
data-rm-segmented - frosted
data-rm-frosted - springModal
data-rm-modal - actionSheet
data-rm-actions - toast
js - contextMenu
data-rm-context
Forms
- floatLabel
data-rm-float - autoGrow
data-rm-grow - charCount
data-rm-count-chars - passwordToggle
data-rm-password - validate
data-rm-validate - rangeFill
data-rm-range - fileDrop
data-rm-drop - stepper
data-rm-steps - fieldFocus
data-rm-field-focus - submitState
data-rm-submit - mascot
data-rm-mascot - successButton
data-rm-success - otp
data-rm-otp - padlock
data-rm-lock - inputKit
data-rm-input - searchField
data-rm-search - tagsField
data-rm-tags - selectField
data-rm-select - clearable
data-rm-clearable - maskField
data-rm-mask - inlineEdit
data-rm-inline-edit
More forms
- strengthMeter
data-rm-strength-meter - sliderPair
data-rm-slider-pair - ratingSlider
data-rm-rating-slider - colourField
data-rm-colour - dateField
data-rm-date-field - signaturePad
data-rm-signature - switchRow
data-rm-switch-row - quantityStepper
data-rm-quantity - consentBox
data-rm-consent - formProgress
data-rm-form-progress - errorSummary
data-rm-error-summary
Feedback
- skeleton
data-rm-skeleton - spinner
data-rm-spinner - progressBar
data-rm-progress-bar - dotsLoader
data-rm-dots-loader - pulseDot
data-rm-status - badgeCount
data-rm-badge - emptyState
data-rm-empty
Notifications
- toastStack
data-rm-toast-stack - snackbar
data-rm-snackbar - banner
data-rm-banner - inlineAlert
data-rm-inline-alert - pushCard
data-rm-push-card - bell
data-rm-bell - counter
data-rm-counter - presenceDot
data-rm-presence - ribbonAlert
data-rm-ribbon-alert - statusBar
data-rm-status-bar - progressToast
data-rm-progress-toast - undoBar
data-rm-undo-bar - confirmSheet
data-rm-confirm-sheet - countdownNote
data-rm-countdown-note - stackedAvatars
data-rm-stacked-avatars - typingDots
data-rm-typing - liveTicker
data-rm-live-ticker - pillAlert
data-rm-pill-alert - cornerToast
data-rm-corner-toast - soundBadge
data-rm-sound-badge
Numbers
- sparkline
data-rm-sparkline - bars
data-rm-bars - donut
data-rm-donut - gauge
data-rm-gauge - stat
data-rm-stat - stars
data-rm-rating
More numbers
- areaChart
data-rm-area-chart - stepChart
data-rm-step-chart - candlestick
data-rm-candles - waterfall
data-rm-waterfall - radar
data-rm-radar - heatCalendar
data-rm-heat-calendar - bulletChart
data-rm-bullet - funnel
data-rm-funnel - treemap
data-rm-treemap - progressRings
data-rm-activity-rings - comparisonBars
data-rm-compare-bars - sparkBars
data-rm-spark-bars - deltaBadge
data-rm-delta-badge - bigNumber
data-rm-big-number - rangeBar
data-rm-range-bar - pieSlices
data-rm-pie - scatterPlot
data-rm-scatter - timelineChart
data-rm-timeline-chart - meterRow
data-rm-meters - numberTicker
data-rm-number-ticker
Tasks and boards
- taskList
data-rm-task-list - taskCheck
data-rm-task-check - taskReorder
data-rm-task-reorder - taskGroup
data-rm-task-group - kanban
data-rm-kanban - taskProgress
data-rm-task-progress - taskFilter
data-rm-task-filter - subtasks
data-rm-subtasks - taskDue
data-rm-task-due - taskPriority
data-rm-task-priority - taskAssignee
data-rm-task-assignee - taskSwipe
data-rm-task-swipe - taskUndo
data-rm-task-undo - taskCount
data-rm-task-count - taskEmpty
data-rm-task-empty - taskSearch
data-rm-task-search - taskBulk
data-rm-task-bulk - taskTimer
data-rm-task-timer - taskStreak
data-rm-task-streak - taskNote
data-rm-task-note
Profile
- avatar
data-rm-avatar - avatarUpload
data-rm-avatar-upload - profileCard
data-rm-profile-card - profileHeader
data-rm-profile-header - userMenu
data-rm-user-menu - accountSwitcher
data-rm-account-switcher - presenceRing
data-rm-presence-ring - followButton
data-rm-follow - bioReveal
data-rm-bio - socialRow
data-rm-social - statsRow
data-rm-stats - badgeRow
data-rm-badges - profileTabs
data-rm-profile-tabs - coverParallax
data-rm-cover - identityChip
data-rm-identity
Writing and editing
- editorToolbar
data-rm-editor-toolbar - bubbleMenu
data-rm-bubble-menu - slashMenu
data-rm-slash-menu - mentionPicker
data-rm-mention-picker - blockHandle
data-rm-block-handle - fencedCode
data-rm-code-block - markdownPreview
data-rm-markdown-preview - findReplace
data-rm-find-replace - commentThread
data-rm-comment-thread - suggestion
data-rm-suggestion - versionChip
data-rm-version-chip - outlinePane
data-rm-outline-pane - wordCount
data-rm-word-count - autosaveBadge
data-rm-autosave-badge - selectionToolbar
data-rm-selection-toolbar - typewriterMode
data-rm-typewriter
Calendars and time
- monthGrid
data-rm-month-grid - weekGrid
data-rm-week-grid - dayTimeline
data-rm-day-timeline - nowLine
data-rm-now-line - miniCalendar
data-rm-mini-calendar - dateRange
data-rm-date-range - timePicker
data-rm-time-picker - durationField
data-rm-duration-field - timezonePill
data-rm-timezone-pill - availabilityGrid
data-rm-availability-grid - bookingSlots
data-rm-booking-slots - recurrenceBuilder
data-rm-recurrence - agendaList
data-rm-agenda-list - deadlinePill
data-rm-deadline-pill - eventChip
data-rm-event-chip - weekStrip
data-rm-week-strip
Admin and tables
- dataGrid
data-rm-data-grid - columnPicker
data-rm-column-picker - bulkBar
data-rm-bulk-bar - savedViews
data-rm-saved-views - queryBar
data-rm-query-bar - keyboardMap
data-rm-keyboard-map - logStream
data-rm-log-stream - metricTile
data-rm-metric-tile - healthGrid
data-rm-health-grid - auditRow
data-rm-audit-row - envSwitch
data-rm-env-switch - roleBadge
data-rm-role-badge - quotaMeter
data-rm-quota-meter - jobQueue
data-rm-job-queue - diffTable
data-rm-diff-table - exportMenu
data-rm-export-menu
Media playback
- playerBar
data-rm-player-bar - scrubber
data-rm-scrubber - waveform
data-rm-waveform - chapterList
data-rm-chapter-list - captionToggle
data-rm-caption-toggle - rateMenu
data-rm-rate-menu - volumeDial
data-rm-volume-dial - pipToggle
data-rm-pip-toggle - queueList
data-rm-queue-list - nowPlaying
data-rm-now-playing - transcriptSync
data-rm-transcript-sync - thumbStrip
data-rm-thumb-strip - liveBadge
data-rm-live-badge - bufferRing
data-rm-buffer-ring - miniPlayer
data-rm-mini-player - keyboardHints
data-rm-keyboard-hints
Shop — product
- productCard
data-rm-product-card - productGallery
data-rm-product-gallery - productZoom
data-rm-product-zoom - colourSwatches
data-rm-swatches - sizePicker
data-rm-size-picker - priceTag
data-rm-price-tag - discountBadge
data-rm-discount-badge - stockMeter
data-rm-stock-meter - ratingStars
data-rm-rating-stars - reviewSummary
data-rm-review-summary - addToCart
data-rm-add-to-cart - wishlistHeart
data-rm-wishlist - compareTray
data-rm-compare-tray - quickView
data-rm-quick-view - productTabs
data-rm-product-tabs - variantPicker
data-rm-variant-picker - breadcrumbTrail
data-rm-breadcrumb-trail - sortBar
data-rm-sort-bar - filterPanel
data-rm-filter-panel - resultCount
data-rm-result-count
Shop — cart
- cartDrawer
data-rm-cart-drawer - cartLine
data-rm-cart-line - cartTotals
data-rm-cart-totals - cartEmpty
data-rm-cart-empty - cartBadge
data-rm-cart-badge - miniCart
data-rm-mini-cart - freeShippingBar
data-rm-free-shipping - couponField
data-rm-coupon - checkoutSteps
data-rm-checkout-steps - orderSummary
data-rm-order-summary - paymentMethods
data-rm-payment-methods - addressForm
data-rm-address-form - deliveryOptions
data-rm-delivery-options - giftNote
data-rm-gift-note - orderConfirm
data-rm-order-confirm - orderTracking
data-rm-order-tracking - returnRequest
data-rm-return-request - invoiceRow
data-rm-invoice-row - saveForLater
data-rm-save-for-later - recentlyViewed
data-rm-recently-viewed
Shop — storefront
- heroBanner
data-rm-hero-banner - collectionGrid
data-rm-collection-grid - lookbook
data-rm-lookbook - categoryTiles
data-rm-category-tiles - saleCountdown
data-rm-sale-countdown - bundleBuilder
data-rm-bundle-builder - sizeGuide
data-rm-size-guide - stockNotify
data-rm-stock-notify - productVideo
data-rm-product-video - swatchGallery
data-rm-swatch-gallery - badgeStack
data-rm-badge-stack - trustRow
data-rm-trust-row - shippingEstimate
data-rm-shipping-estimate - recentlyBought
data-rm-recently-bought - crossSell
data-rm-cross-sell - upsellRow
data-rm-upsell-row - giftCard
data-rm-gift-card - loyaltyPoints
data-rm-loyalty-points - referralBox
data-rm-referral-box - subscribeBox
data-rm-subscribe-box
Shop — account
- orderList
data-rm-order-list - orderCard
data-rm-order-card - orderStatusPill
data-rm-order-status - trackingMap
data-rm-tracking-map - deliverySlot
data-rm-delivery-slot - addressBook
data-rm-address-book - addressCard
data-rm-address-card - paymentCards
data-rm-payment-cards - subscriptionCard
data-rm-subscription-card - pauseSubscription
data-rm-pause-subscription - invoiceList
data-rm-invoice-list - downloadRow
data-rm-download-row - wishlistGrid
data-rm-wishlist-grid - reviewForm
data-rm-review-form - reviewCard
data-rm-review-card - questionAnswer
data-rm-question-answer - supportTicket
data-rm-support-ticket - chatBubble
data-rm-chat-bubble - refundStatus
data-rm-refund-status - accountNav
data-rm-account-nav
Showpiece backgrounds
- bubbleField
data-rm-bubble-field - fireworks
data-rm-fireworks - gravityStars
data-rm-gravity-stars - holeTunnel
data-rm-hole-tunnel - radialIntro
data-rm-radial-intro - lightRays
data-rm-light-rays - prismSplit
data-rm-prism-split - driftShapes
data-rm-drift-shapes - noiseWave
data-rm-noise-wave - linkWeb
data-rm-link-web - ripplePool
data-rm-ripple-pool - glowOrbs
data-rm-glow-orbs
Showpiece controls
- liquidButton
data-rm-liquid-button - flipButton
data-rm-flip-button - copyButton
data-rm-copy-button - themeToggle
data-rm-theme-toggle - countButton
data-rm-count-button - flipCard
data-rm-flip-card - managementBar
data-rm-management-bar - pinList
data-rm-pin-list - previewLinkCard
data-rm-preview-link - fileTree
data-rm-file-tree - presenceRow
data-rm-presence-row - morphIcon
data-rm-morph-icon
Everything else
- pricingTable
data-rm-pricing - planToggle
data-rm-plan-toggle - featureMatrix
data-rm-feature-matrix - savingsBadge
data-rm-savings - quoteCard
data-rm-quote - logoWall
data-rm-logo-wall - ratingRow
data-rm-rating-row - faqList
data-rm-faq - helpTip
data-rm-help-tip - shortcutSheet
data-rm-shortcuts - tourStep
data-rm-tour - checklistCard
data-rm-checklist - welcomeCard
data-rm-welcome - footerColumns
data-rm-footer-columns - announcementRow
data-rm-announcement - megaFooter
data-rm-mega-footer - sortableTable
data-rm-sortable - stickyHeaderTable
data-rm-sticky-head - rowExpand
data-rm-row-expand - tableEmpty
data-rm-table-empty - codeBlock
data-rm-code - diffView
data-rm-diff - apiRow
data-rm-api-row - uptimeDots
data-rm-uptime - changelogFeed
data-rm-changelog - bentoGrid
data-rm-bento - splitPanel
data-rm-split-panel - stickyAside
data-rm-sticky-aside - dividerMark
data-rm-divider - sectionMark
data-rm-section-mark
Pages
- pageTransition
js
02Everything, running
Every cell is the shipped component, looping.
Nothing here is a recording. Hover, press, drag. The ones that normally play once are set to repeat so you can actually see them.
Text
decrypt
SOYRAGE AGENCY
glitch
404
shiny
Available for work
countUp
1,250
typewriter
waveText hover
Run the pointer over
morph
pressure hover
Pressure
odometer
128,400
curve
AWARD-GRADE MOTION · SOYRAGE AGENCY ·
marquee drag any row · scroll the page · one runs upward
TRANSFORMOPACITY
CLIP-PATHFILTER
no layout shiftone shared frameone scroll read
zero dependenciesprefers-reduced-motionMIT
SOYRAGERAGE MOTION
504 COMPONENTS
Surfaces
spotlight hover
radial-gradient
tilt hover
10° max
border
@property
glare hover
pointer-tracked sheen
trail
offset-path
electric
feDisplacementMap
beam
source
target
blurEdge
Focus falls off gradually, the way a lens does it — stacked layers, each blurred harder and masked to a narrower band.
One backdrop-filter with a mask blurs everything equally and reads as a smear.
Fields
waves hover
retroGrid
dotGrid hover
Buttons & cursors
fill · shimmer · spark · swap · ripple · magnetic hover every one
Six effects on one surface, so you can tell them apart. Black on cream here and cream on black everywhere else — the same components, no second code path.
cursor · target · crosshair · splash
A custom cursor is a page-level decision, so init() leaves it alone. Switch this page's:
Galleries
carousel drag · arrow keys
Type
pressure · morph · curve · odometer · highlight
Surfaces
beam · trail · glare · electric · blurEdge
Fields
waves · retroGrid · dotGrid · grain
Gallery
carousel · ring · deck · dock · scratch · imageTrail
Navigation
pill · gooey · condense · overlay · tabs
Buttons
fill · shimmer · spark · swap · ripple
ring drag · arrow keys
deck
panels hover · tab
orbit
JSCSS
SVGMCP
magnetLines hover
dock hover
imageReveal
pixelate hover
scratch drag
hoverPreview hover the rows
- Aurora Studio2026
- Northwind2026
- Cassette2025
- Field Notes2025
imageTrail sweep the pointer
move across
Light
meteors
seeded shower
sparkles
Launch day
lamp
conic cone
beams
masked shafts
outline scroll
Fills as you scroll
countdown
Things that open
flip hover · enter
Fronthover, or press Enter
Backthe hidden face is inert
expand click a card
accordion
The height animates from 0fr to 1fr on a grid row, so nothing is measured and nothing is hardcoded.
An image that loads late, a font that swaps, text that rewraps — every version built on scrollHeight breaks on all three.
aria-expanded, aria-controls, and a labelled region.
lightbox click
drag throw it · arrows
throw me
confetti press
shuffle filter it
rollText hover the links
Chrome
scrollbar five looks · scroll them
dropdown arrow keys
tooltip · toggle
Hovers
underline · press · halo · strokeDraw
corners hover
brackets
Decoration
mesh
four blurred stops
starfield scroll
three depths
dots
one gradient
stripes
hatching
scanline
something is live
All 50 scroll entrances
Every named start state, on the same component. Scroll them into view — each plays as it arrives, and each runs backwards if you scroll away and come back.
All 52 button looks
One component, fifty-two named looks. Hover them, reach them with Tab, press them. None replaces the element underneath.
Navigation, the larger pieces
command press ⌘K or ctrl-K
sidebar escape closes
rail follows the page
bottomNav tap one
mega hover intent
Forms
mascot · passwordToggle · floatLabel type in it
successButton press it
padlock type 1234
otp type · paste a code
rangeFill
toggle · charCount
autoGrow · validate leave it empty and blur
Twenty galleries
masonry resize the window
swipeStack drag · arrow keys
filmstrip drag it
hoverPeek hover the titles
- Northern light
- Low tide
- Salt flats
polaroids hover · tab
foldGallery hover a panel
gridZoom click a tile
crossfade arrow keys
parallaxGrid scroll
tiltGrid move the pointer
maskReveal scroll
slats scroll
zoomStrip scroll it sideways
spiralGallery scroll
imageWall drag · arrow keys
flipGrid scroll into view
01Plate
02Plate
03Plate
peelStack press the button
focusGrid hover · tab
ribbon scroll
contactSheet click a frame
Text boxes
searchField press the icon
tagsField Enter · Backspace
selectField · clearable
maskField edit the middle
inlineEdit click the title
inputKit three of twenty-four
All 24 field looks
One component, twenty-four named looks. Type in them, reach them with Tab. Every one keeps the real input underneath, so autofill, paste, undo and your password manager all still work.
All 24 card looks
One component, twenty-four named looks. None of them animates a width or a height, so a grid of cards never reflows while you move across it.
Page set pieces
mosaic assembles from the middle out
lineByLine
Prose arrives a line at a time, because a paragraph read one word at a time is a reading test rather than an effect. The lines are re-split when the width changes, since a line is a fact about the layout and not a property of the text.
timeline
- MeasureThe line and the dots come from one number.
- DrawSo a dot can never light before the line reaches it.
- ReverseAnd scrolling back up un-draws all of it.
revealGrid a wave from the corner
Seven more carousels
coverflow scroll it sideways
thumbs pick one, or scroll the frame
wheel hover · arrows
slideshow real controls
ticker opposing rows
coverflowthumbsautoplaywheel
peektickerslideshowcarousel
autoplay it stops when you touch it
onetwothreefour
peek the next one shows
onetwothree
Phone shapes
island press to change it
Ready
sheet drag the grip down
segmented arrow keys
springModal · actionSheet
toast hover the stack to hold it
contextMenu right-click · menu key
Right-click in here
Feedback
spinner six shapes
skeleton
progressBar · dotsLoader
pulseDot · badgeCount
All systems go
Rebuilding
Inbox 3
emptyState
Nothing here yet
An empty state is the moment a product either explains itself or looks broken.
Add the first oneNumbers, drawn
sparkline drawn, not scaled
bars
donut · gauge
68%
72
stat · stars
1,204Visitors
Navigation
pill hover · tab
gooey hover · tab
overlay keyboard safe
tabs arrow keys
Move right and the panel arrives from the right; move back and it comes from the left. One comparison, and the difference between tabs that feel spatial and tabs that blink.
A real tablist: arrow keys, Home and End, roving tabindex, and panels genuinely hidden when inactive rather than parked off screen.
Under reduced motion the slide is dropped and the switch is instant. The content was the point; the direction was the flourish.
Menu shapes
circleNav arrow keys
curtainNav Escape closes
hoverSpread hover · tab
breadcrumbs open the middle
treeNav arrows · Right opens
splitNav parts open
stackNav deals out
dotNav follows the page
Notifications
toastStack
snackbar
banner
Scheduled maintenance at 22:00.
inlineAlert
The content this wraps around.
pushCard
The content this wraps around.
bell
counter
3
presenceDot
Ana
ribbonAlert
The content this wraps around.
statusBar
All systems normal
progressToast
Uploading
undoBar
Message deleted
confirmSheet
The content this wraps around.
countdownNote
Session ends in
stackedAvatars
typingDots
Ana is typing
liveTicker
pillAlert
Beta
cornerToast
soundBadge
2
Task lists and boards
taskList
- Buy milk
- Book the van
taskCheck
taskReorder
- Draft the brief
- Book the studio
taskGroup
This week
- Send the invoice
kanban
To do
- Write copy
Doing
taskProgress
- Buy milk
taskFilter
- File the VAT
subtasks
- Copy
- Photography
taskDue
taskPriority
taskAssignee
taskSwipe
taskUndo
The content this wraps around.
taskCount
taskEmpty
All done
Nothing left today.
taskSearch
taskBulk
taskTimer
taskStreak
taskNote
Client wants the blue version by Friday.
Numbers, drawn — twenty more
areaChart
- Jan
- Feb
- Mar
stepChart
candlestick
| Mon |
waterfall
- Opening
- Churn
- Closing
radar
- Speed
- Range
- Power
heatCalendar
- 0 commits on 2025-01-06
- 3 commits on 2025-01-07
- 5 commits on 2025-01-08
- 2 commits on 2025-01-09
- 4 commits on 2025-01-10
- 1 commits on 2025-01-11
- 0 commits on 2025-01-12
- 0 commits on 2025-01-13
- 4 commits on 2025-01-14
- 6 commits on 2025-01-15
- 3 commits on 2025-01-16
- 5 commits on 2025-01-17
- 2 commits on 2025-01-18
- 0 commits on 2025-01-19
- 1 commits on 2025-01-20
- 7 commits on 2025-01-21
- 9 commits on 2025-01-22
- 8 commits on 2025-01-23
- 6 commits on 2025-01-24
- 2 commits on 2025-01-25
- 0 commits on 2025-01-26
- 0 commits on 2025-01-27
- 5 commits on 2025-01-28
- 8 commits on 2025-01-29
- 11 commits on 2025-01-30
- 7 commits on 2025-01-31
- 3 commits on 2025-02-01
- 1 commits on 2025-02-02
- 2 commits on 2025-02-03
- 6 commits on 2025-02-04
- 9 commits on 2025-02-05
- 12 commits on 2025-02-06
- 8 commits on 2025-02-07
- 4 commits on 2025-02-08
- 0 commits on 2025-02-09
- 0 commits on 2025-02-10
- 3 commits on 2025-02-11
- 5 commits on 2025-02-12
- 4 commits on 2025-02-13
- 6 commits on 2025-02-14
- 2 commits on 2025-02-15
- 0 commits on 2025-02-16
- 1 commits on 2025-02-17
- 4 commits on 2025-02-18
- 7 commits on 2025-02-19
- 5 commits on 2025-02-20
- 3 commits on 2025-02-21
- 2 commits on 2025-02-22
- 0 commits on 2025-02-23
- 0 commits on 2025-02-24
- 2 commits on 2025-02-25
- 4 commits on 2025-02-26
- 3 commits on 2025-02-27
- 5 commits on 2025-02-28
- 1 commits on 2025-03-01
- 0 commits on 2025-03-02
- 0 commits on 2025-03-03
- 6 commits on 2025-03-04
- 8 commits on 2025-03-05
- 5 commits on 2025-03-06
- 4 commits on 2025-03-07
- 2 commits on 2025-03-08
- 1 commits on 2025-03-09
- 0 commits on 2025-03-10
- 3 commits on 2025-03-11
- 5 commits on 2025-03-12
- 7 commits on 2025-03-13
- 4 commits on 2025-03-14
- 2 commits on 2025-03-15
- 1 commits on 2025-03-16
- 0 commits on 2025-03-17
bulletChart
Revenue
funnel
- Visited
- Signed up
- Paid
treemap
- Search
- Direct
- Social
progressRings
- Move
- Exercise
- Stand
comparisonBars
- Mon
- Tue
- Wed
- Thu
- Fri
sparkBars
deltaBadge
bigNumber
1,204
rangeBar
Delivery window
pieSlices
- Direct
- Search
- Social
scatterPlot
- Batch A
- Batch B
timelineChart
- Discovery
- Design
- Build
- Launch
meterRow
- Search
- Direct
- Social
numberTicker
1,204
Forms, eleven more
strengthMeter
sliderPair
ratingSlider
colourField
dateField
signaturePad
switchRow
quantityStepper
consentBox
The content this wraps around.
the termsThe content this wraps around.
formProgress
errorSummary
Profile and identity
avatar
avatarUpload
profileCard
Nora Vale
Field recordist. Rivers, mostly.
profileHeader
userMenu
accountSwitcher
- Nora Vale
- Riverlog Studio
presenceRing
followButton
bioReveal
Nora Vale has been recording rivers since 2016. Mostly at dawn.
socialRow
statsRow
- Followers
- 12480
- Recordings
- 318
badgeRow
- 🏅
- 🌅
profileTabs
The content this wraps around.
The content this wraps around.
coverParallax
identityChip
Scroll, fifteen more
scrollCounter
scrollRotate
The content this wraps around.
scrollScale
The content this wraps around.
scrollBlur
scrollColour
The content this wraps around.
pinSteps
The content this wraps around.
The content this wraps around.
scrollDraw
depthLayers
scrollSnapSections
One
Two
revealMaskScroll
The content this wraps around.
marqueeScroll
DesignMotion
scrollGradient
The content this wraps around.
scrollSplit
Left
Right
Behind
scrollZoomPin
scrollTypeScale
A larger idea
Ecommerce — product
productCard
productGallery
productZoom
colourSwatches
sizePicker
priceTag
discountBadge
stockMeter
ratingStars
reviewSummary
- 5
- 4
- 3
- 2
- 1
addToCart
wishlistHeart
compareTray
quickView
Linen shirt
Heavyweight, garment dyed.
productTabs
variantPicker
breadcrumbTrail
sortBar
filterPanel
resultCount
Ecommerce — cart and checkout
cartDrawer
cartLine
-
Very Loud Tote (demo product)
cartTotals
cartEmpty
The content this wraps around.
Nothing in here yet
Everything in this demo shop is invented.
cartBadge
miniCart
Two invented items.
freeShippingBar
couponField
checkoutSteps
orderSummary
Order summary
- Subtotal
- £48.00
- Delivery
- Free
paymentMethods
addressForm
deliveryOptions
giftNote
orderConfirm
Order placed
A demonstration confirmation for an invented shop.
orderTracking
- Ordered
- Packed
- Out for delivery
- Delivered
returnRequest
invoiceRow
| INV-DEMO-004 | £48.00 |
| Two invented items, delivered. | |
saveForLater
Invented Mug
recentlyViewed
Thirty more
pricingTable
Starter
£0
Studio
£24
Agency
£78
planToggle
featureMatrix
| Feature | Starter | Studio |
|---|---|---|
| Custom domain | — | ✓ |
savingsBadge
Save 20%
quoteCard
They rebuilt our checkout in a fortnight.
logoWall
ratingRow
4.3
faqList
Can I cancel?
Any time.
helpTip
Total
shortcutSheet
- Search
- /
- New
- N
tourStep
Save your work here.
And share it from here.
checklistCard
- Create an account
- Invite your team
- Connect a repository
welcomeCard
Welcome to the studio
Three things worth doing first.
footerColumns
announcementRow
Free shipping this week
New: dark mode is live
megaFooter
sortableTable
| Client | MRR |
|---|---|
| Acme | £2,400 |
stickyHeaderTable
| Invoice | Amount |
|---|
rowExpand
| INV-0042 | £1,200 |
| Paid 3 September by card ending 4242. | |
tableEmpty
| Invoice | Amount |
|---|
codeBlock
import { codeBlock } from "@soyrageagency/rage-motion";diffView
function total(items) {
return items.length;
return items.reduce(sum, 0);
apiRow
Creates a charge.
uptimeDots
changelogFeed
- 3 September
v2.1
Sortable tables.
bentoGrid
splitPanel
Files
Editor
stickyAside
dividerMark
sectionMark
Recent projects
Ecommerce — storefront
heroBanner
The winter table
Stoneware thrown in small batches at the Cloudberry Studio, a shop that does not exist.
See the collectioncollectionGrid
Ochre beaker
€24
Ink beaker
€24
Ochre jug
€38
lookbook
categoryTiles
saleCountdown
Winter sale ends in
bundleBuilder
sizeGuide
Linen shirt — size guide
| Size | Chest | Length |
|---|---|---|
| S | 96 | 70 |
| M | 104 | 72 |
| S | 38 | 27.5 |
| M | 41 | 28.5 |
stockNotify
productVideo
swatchGallery
badgeStack
- New in
- 30% off this week
- Only 3 left
- Made in Valencia
trustRow
- Free delivery over €60Standard post, 2 to 4 working days.
- 60-day returnsUnused and in its box. We pay for the label.
- Made in ValenciaThrown, glazed and packed in one workshop.
shippingEstimate
recentlyBought
- Someone in Bristol chose the Ochre Beaker — about an hour ago
- Someone in Leeds chose the Linen Cloth — this morning
- Someone in Cork chose the Stoneware Jug — yesterday
crossSell
Goes well with
upsellRow
giftCard
loyaltyPoints
- Free postcard
- Free delivery
referralBox
subscribeBox
Ecommerce — account and support
orderList
- Order RM-0031 — delivered 8 April 2031
- Order RM-0032 — on its way
- Order RM-0029 — cancelled
orderCard
Order RM-0031 (invented)
Placed 4 April 2031 · £48.00
- Kelp mug × 2
- Bracken tea towel × 1
orderStatusPill
Order RM-0032
trackingMap
- Collected
- At the depot
- Out for delivery
- Delivered
deliverySlot
addressBook
addressCard
Home
Flat 2, 14 Bracken Row, Leeds LS0 0AApaymentCards
subscriptionCard
Kelp coffee, every month (invented)
£14.00 a month, cancel whenever you like.
pauseSubscription
Kelp coffee, every month (invented)
invoiceList
- RM-0031 — 4 April 2031 — £48.00
- RM-0033 — 2 May 2031 — £14.00
- RM-0022 — 9 November 2030 — £112.50
downloadRow
-
April statement (invented)
wishlistGrid
-
Kelp mug
-
Bracken tea towel
reviewForm
reviewCard
Sturdier than it looks
Bought this for the studio and it has survived a winter of being knocked off the bench. The glaze has one chip and that was entirely my fault.
questionAnswer
Does the lid fit the older size?
- Yes — mine fits the 2029 one exactly.
- The lid is shared across both sizes.
- Fits, but it is a firmer push than the new one.
supportTicket
Parcel marked delivered but not here
Thanks for getting in touch — we have asked the courier for the drop-off photograph.
chatBubble
Thanks for the photograph.
No problem — the box was empty when it arrived.
refundStatus
accountNav
Writing and editing
editorToolbar
bubbleMenu
Select any part of this sentence and the formatting bar appears above it.
slashMenu
- Heading
- Quote
- Code block
- Bulleted list
- Table
- Divider
mentionPicker
Ask @
- Nora Vale — Design
- Amina Diaz — Engineering
- Tomas Reid — Support
- Priya Nair — Legal
blockHandle
Findings
Three quarters of the people we interviewed had already built the thing by hand.
Nobody could name the person who owned the spreadsheet.
“We send it out on Fridays and hope.”
The handover step is where the week is lost.
fencedCode
import { editorToolbar, slashMenu } from "@soyrageagency/rage-motion";
const stop = editorToolbar();
slashMenu("[data-rm-slash-menu]", { trigger: "/" });
window.addEventListener("beforeunload", stop);markdownPreview
Quarterly note
We shipped the importer on the 14th.
- Two customers migrated in the first week
- The CSV path is still the slow one
findReplace
The brief went out on Monday. The brief came back on Thursday with the brief attached twice.
Every brief since has been sent as a link.
commentThread
The handover step is where the week is lost, according to four of the six teams we spoke to.
suggestion
We shipped the importer in the
second
final week of March, ahead of
the agreed date.
versionChip
outlinePane
Summary
Four of six teams lose a day a week to the handover.
Method
Eighteen interviews across three markets.
Interviews
Forty minutes each, unstructured after the first ten.
Sampling
Weighted towards teams of under twenty.
Findings
The spreadsheet is the product.
Handover
Nobody owns the Friday send.
What we recommend
Name an owner before buying a tool.
wordCount
autosaveBadge
Quarterly note
selectionToolbar
Select a sentence in this paragraph and the action bar docks to the bottom of the window.
It stays in one place whether you selected with a mouse, a thumb, or Shift and the arrow keys.
typewriterMode
The caret line holds its height while the text scrolls beneath it.
Paragraphs away from the caret dim by opacity alone, so nothing moves and everything is still selectable and still read aloud in full.
Keep typing and this paragraph rises to meet the same line.
Calendars and time
monthGrid
| Mon | Tue | Wed | Thu | Fri | Sat | Sun |
|---|---|---|---|---|---|---|
weekGrid
|
|
|
|
dayTimeline
- Stand-up
- Workshop with the studio
- Lunch
- Rebrand review
nowLine
- Editorial planning
- Photography brief
miniCalendar
| M | T | W | T | F | S | S |
|---|---|---|---|---|---|---|
dateRange
timePicker
durationField
timezonePill
Kick-off is at and and .
availabilityGrid
bookingSlots
recurrenceBuilder
agendaList
- Stand-up
- Brand workshop
- Send the estimate
- Photography at the warehouse
- Deploy window
- Lunch with the printer
deadlinePill
- Invoice 2026-0042
- Brand guidelines
- Domain renewal
eventChip
- Client kick-off
- Supplier call
- Studio photography
- Lunch
- Rebrand review
- Invoicing
weekStrip
Admin and data tables
dataGrid
| Order | Customer | Status | Total |
|---|---|---|---|
| #4821 | Marta Ibáñez | Packing | €248.00 |
| #4822 | Hendrik Voss | Awaiting payment | €1,940.50 |
| #4823 | Aoife Brennan | Shipped | €76.20 |
| #4824 | Rui Cardoso | Packing | €512.00 |
| #4825 | Lena Ostrowska | Refunded | €96.99 |
columnPicker
| Order | Customer | Region | Total |
|---|---|---|---|
| #4821 | Marta Ibáñez | Iberia | €248.00 |
| #4822 | Hendrik Voss | DACH | €1,940.50 |
| #4823 | Aoife Brennan | Ireland | €76.20 |
bulkBar
| Order | Customer | Total |
|---|---|---|
| #4821 | Marta Ibáñez | €248.00 |
| #4822 | Hendrik Voss | €1,940.50 |
| #4823 | Aoife Brennan | €76.20 |
savedViews
queryBar
keyboardMap
logStream
- infoBuild 4821 started
- infoDependencies resolved in 17s
- warnImage assets exceed the 2 MB budget
- errorMigration 0042 failed: column already exists
metricTile
Orders
1,284Refund rate
2.4%Average basket
€84.50healthGrid
- API
- Checkout
- Search
- Webhooks
- PDF export
- Legacy sync
- CDN
auditRow
- alex@northwind.co deleted the EU pricing rule
- ci-bot rotated the staging API key
- marta@northwind.co invited rui@northwind.co as Editor
envSwitch
roleBadge
| Person | Role |
|---|---|
| marta@northwind.co | Owner |
| alex@northwind.co | Admin |
| rui@northwind.co | Editor |
| aoife@northwind.co | Viewer |
quotaMeter
jobQueue
- Rebuild search index
- Reconcile Stripe payouts
- Nightly CSV export
- Recompute customer lifetime value
- Warm the CDN cache
- Import supplier catalogue
diffTable
| Field | Before | After |
|---|---|---|
| Plan | Team | Business |
| Seats | 12 | 40 |
| SSO domain | northwind.co | |
| Trial ends | 2026-03-18 | |
| Billing email | billing@northwind.co | billing@northwind.co |
| Region | eu-west-1 | eu-west-1 |
exportMenu
Media playback
playerBar
Opening the kiln after a thirty-hour firing.
scrubber
waveform
chapterList
- Digging the clay
- Wedging
- Throwing the beaker
- Trimming the foot
- Loading the kiln
- Opening, thirty hours later
captionToggle
rateMenu
volumeDial
pipToggle
queueList
- Digging the clay — 4:12
- Wedging — 2:48
- Throwing the beaker — 7:31
- Trimming the foot — 3:55
- Loading the kiln — 5:02
nowPlaying
Wedging the clay, and why most people do it backwards
Marta Ruiz
transcriptSync
We start at the clay pit, which is four fields behind the workshop.
It has to be wedged before anything else happens to it.
Most people wedge to mix. You wedge to get the air out.
A single bubble will take the pot apart in the kiln.
Sixty turns, and then you stop, because over-wedging stiffens it.
thumbStrip
liveBadge
bufferRing
miniPlayer
keyboardHints
Showpiece backgrounds
bubbleField
Slow fermentation
Eighteen days in open cedar, then six weeks cold.
Read the processfireworks
New year, new kiln
The studio reopens on the 6th
Book a benchgravityStars
Night firing
Wood-fired reduction, twenty-two hours, three of us awake.
holeTunnel
Down the spout
A century of pipework under the Ebro, mapped in eleven days.
radialIntro
Twelve benches, one kiln, no rush
Applications for the spring intake close on the 30th.
ApplylightRays
Open studio
Saturdays, ten until four
Come and put your hands in something.
prismSplit
Glaze log 041
Tenmoku over a thin slip, cone 10 reduction. Broke to rust on the rim.
Open the logdriftShapes
What we actually do
Small runs, honest materials, and a kiln we know the moods of.
noiseWave
Sierra de Guara
Four days walking, one notebook, no signal after the second morning.
linkWeb
Everyone who touched this piece
Eleven people, four workshops, one glaze that came from a neighbour.
ripplePool
Throw something
Move across this and it moves back.
Book a tasterglowOrbs
Kiln 3 is up to temperature
Cone 10 by midnight if the wind holds.
Showpiece controls
liquidButton
flipButton
copyButton
npm i @soyrageagency/rage-motionthemeToggle
countButton
flipCard
Atlas
Identity and site, 2025.
managementBar
Select photos to get started
0 selected
pinList
- Brief — Atlas.pdf
- Invoice 0148.pdf
- Shoot list.md
- Contract, signed.pdf
previewLinkCard
fileTree
- src
- core
- motion.js
- split.js
- components
- flourish.js
- notify.js
- core
- README.md
presenceRow
- Ana
- Héctor
- Mireia
morphIcon
Texture
rings
expanding
hexGrid hover
honeycomb
plusGrid
plus field
diagonals
soft hatch
topography
contours
circuit
traces
vignette scroll
edge falls in
halftone hover
dot matrix
03Made of scrolling
Tied to position, never to a timer.
Which means every one of these runs backwards too. An animation that only plays forwards feels broken the instant somebody scrolls the other way — and most of them do.
tracing
A line drawn down the article as you read it: a real path revealed with
stroke-dashoffset, which is why it can curve and why the
glowing head sits exactly on it.
And here is highlight — the paragraph fills word by word as it crosses the viewport. The unlit state is a muted colour, never an opacity of zero, because prose you cannot read until you have scrolled far enough is a reading tax.
parallax
scrub
--rm-progress runs 0 → 1 as this block crosses the
viewport, and the stylesheet decides what that means. Anything
expressible in CSS becomes scroll-driven without another component.
flatten
stack
The pin is CSS
Cards pile up and shrink as you pass them. The sticking is position: sticky; only the scale and the brightness are computed.
Each one lands lower
Every card sticks a little further down than the last, so the pile stays readable at the top rather than disappearing behind the front one.
And it degrades
Under reduced motion the whole effect is dropped and they are simply three cards, in order, at full size.
sticky
One pinned visual
The pin is CSS. The only JavaScript decides which panel is in the reading position and swaps the image to match.
Text stays text
The panels are ordinary stacked content, so on a narrow screen you drop the sticky rule in a media query and it degrades to a normal article.
No second code path
No JavaScript branch for mobile, no separate template. The same markup, one rule lighter.
horizontal
Vertical scroll distance is mapped to horizontal travel by giving the wrapper height.
It never hijacks the wheel, so the trackpad, the keyboard and the scrollbar all keep working.
Which is exactly what the transform-and-wheel-listener version breaks, every time.
And under reduced motion it becomes a plain horizontally scrollable strip.
04Two states, one handle
Before and after, with the keyboard too.
Almost every before/after slider on the web is pointer-only, which
leaves it unusable on a keyboard and invisible to a screen reader. This
is a real role="slider": arrows, Home, End and an announced
value. Dragging is the enhancement, not the only door.
Drag it, or focus the handle and use ← →
05Hand it to your assistant
Teach these components to your AI.
Ask any assistant for a scroll reveal and it writes the same snippet it has written ten thousand times. It is not careless — it has no idea what is already in your project, so it writes the most average thing that could possibly work.
Without MCP
window.addEventListener("scroll", () => {
document.querySelectorAll(".fade").forEach((el) => {
if (el.getBoundingClientRect().top < innerHeight)
el.classList.add("show");
});
});A layout read per element per event. And a .fade { opacity: 0 } waiting for the day the script does not load.
With MCP
<div data-rm-reveal="up" data-rm-delay="120">…</div>It looks before it writes, finds the component you already have, and tells you why it chose it — because the reasoning travels with the component.
Claude Code
Cursor · Claude Desktop
No key, no account, no network. The server only reads files from the installed package.
06Take it with you
Three ways in.
One file
Every component depends only on core/motion.js. Take the two and go — that is how most people will use this, and it is designed for exactly that.
The package
npm i @soyrageagency/rage-motionimport { init } from "@soyrageagency/rage-motion";
import "@soyrageagency/rage-motion/css";
init();No build
<link rel="stylesheet" href="…/rage-motion.css">
<script type="module">
import { init } from "…/index.js";
init();
</script>