Motion
Motion gallery
Every kinetic primitive in @luc/ui, grouped by what it is for. Each entry names the public API, and every one of them is driven by the same intensity profile and the same reduced-motion contract.
Spatial
Depth, geometry and continuity: one public export per capability family, all with live controls.
ParallaxScene
<ParallaxScene depth tilt> · <ParallaxLayer depth z axis>A depth coordinate system: one pointer offset, published as custom properties, multiplied per layer.
OrbitField
<OrbitFieldRing> · <OrbitFieldNode>Geometric composition on rings, with seats that are real buttons and labels that stay upright.
ExpandableSurface
<ExpandableSurface> · <ExpandableSurfaceTrigger>A surface that grows out of its own rectangle, in flow — no portal, no scroll lock, no focus trap.
KineticHeadline
<KineticHeadline text mode live />A change of words with a direction and a rhythm — one accessible string, real text nodes.
Alive on every interaction
CardStack
<CardStackItem> · <CardStackControls>Depth as navigation: the deck tells you where you are, and inert cards stay out of the tab order.
Trend
Carry
SelectionBeam
<SelectionBeam from to active />Two DOM nodes, one travelling packet: selection, marker and inspector read as a single gesture.
Signature
Distinctive, reusable interactions with their own pages and live controls.
PressRipple
usePressRipple · <RippleLayer />Ink that starts where the finger landed. Used by Button and IconButton by default.
AuroraSurface
<AuroraSurface />A drifting, palette-derived atmosphere for the one surface allowed to be memorable.
Ambient depth
BeamFlow
<BeamFlow points />A packet travelling between nodes: pipelines, agent traces, integration maps.
MagnifyDock
<MagnifyDock> · <MagnifyDockItem>Pointer-proximity magnification for a dense toolbar, with no React re-render per move.
Marquee
<Marquee />A seamless, pausable stream for content that is genuinely a stream.
Pointer
Cursor-reactive depth and light. Inert on touch devices and under reduced motion.
SpotlightSurface
<SpotlightSurface />A light layer above the surface and below the content, so text never loses contrast.
Move the pointer
BorderGlow
<BorderGlow mode />A thin light on the perimeter: travelling, following, or a calm ring when selected.
Follow · travel
Magnetic
<Magnetic strength />A control that leans toward the pointer and springs home, clamped so it stays clickable.
TiltSurface
<TiltSurface max />The loudest pointer effect: a 3D lean with an optional sheen. Never a default.
GlareSurface
<GlareSurface />A soft highlight that tracks the pointer across a raised surface.
BorderTrail
<BorderTrail />One segment travelling the perimeter — for a task that is running, not for decoration.
Feedback
Answers to something the user did, or to something the product is doing.
NumberTicker
<NumberTicker value />A value moving to its new state with the width reserved and the digits tabular.
IconMorph
<IconMorph state icons />One glyph dissolving into the next in place: copy to check, expand to collapse.
ClickBurst
<ClickBurst />A short spark from the actual pointer position at a moment of completion.
DataChangeFlash
<DataChangeFlash />A brief tint when a number changes, so a scan of a table shows what moved.
97
Shimmer
<Shimmer /> · <ShimmerText />The loading language: a skeleton with shape, and a sweep inside a glyph fill.
Entrance
Content arriving with intent: once, in reading order, and never on a timer.
Reveal
<Reveal /> · <StaggerGroup />A short fade and a few pixels of travel, once, the first time it is seen.
TextReveal
<TextReveal mode />A headline assembling by word or by character, with the layout reserved up front.
Collapse
<Collapse />Disclosure whose height is measured, not guessed, so nothing jumps on close.
MorphingDialog / MorphingPopover
<MorphingDialog />Trigger-to-surface continuity: the panel grows out of the thing you pressed.
One grammar, one switch
Every primitive above reads the same resolved profile, so loudness is scoped rather than hard-coded.
A component reads the resolved profile (`pointer`, `ambient`, `travel`, `glow`, `depth`) and nothing else. A dense table toolbar scopes itself to `functional`, a hero pushes to `showcase`, and reduced motion resolves every level to `none` — once, in one place.