Motion

Scroll-reveal, orchestration, and pointer-follow primitives from @idinstudio/ui — the building blocks behind every landing-page preset's entrance choreography.

These read best while scrolling

FadeIn, Reveal, and Stagger trigger the moment their content enters the viewport — hit Replay animation on any of those three to re-fire the entrance in place, or scroll the demo out of view and back. Parallax shifts its content as you scroll past it, and SmoothScroll (not visibly demoable in a nested doc frame — see below) smooths the whole page's scroll feel at the layout root. Every primitive here checks prefers-reduced-motion and renders instantly, fully visible, with no transition at all when it's set.

FadeIn

Scroll-reveal wrapper — animates from an offset, transparent starting position to fully visible once in view (IntersectionObserver-backed whileInView).

Built for teams that ship

Every primitive here is scroll-triggered, not autoplaying.

Reveal

A more dramatic scroll-triggered entrance than FadeIn — wipes its children into view with a clip-path mask instead of a fade/translate.

Design systems that ship

Stagger / StaggerItem

Orchestrated children reveal. Stagger triggers a shared visible state on view-enter; each StaggerItem inherits it, offset by staggerDelay per item.

Fast

Ship an MVP in weeks, not quarters.

Accessible

WCAG AA baseline on every component.

Token-driven

Re-skin the whole system from one config.

Parallax

Shifts children vertically as the viewport scrolls past them, tracked against the element's own scroll progress. Positive speed lags behind scroll, negative leads it.

Foreground layer — speed -0.5 (leads the scroll)

Background layer — speed 0.5 (lags the scroll)

Magnetic

Pointer-follow magnetic hover for a single child. As the pointer moves over the wrapper, the child drifts toward it, clamped to maxDistance. Disabled on touch/pen and under prefers-reduced-motion.

Marquee

Infinite horizontal scroller — a pure CSS keyframe loop, no JS animation frame, no motion.dev import. Pauses on hover and on focus-within so a keyboard user can stop it to read.

Northwind Studio

Halcyon Labs

Fernweh & Co.

Loomwork

Northstar Robotics

SmoothScroll

Lenis provider for the whole app/page — attaches a global inertial-scroll instance on mount, renders no DOM of its own. Wrap once at the layout root, not per-section.

Root-level only — no isolated preview here

SmoothScroll intercepts the page's native scroll via a global Lenis instance, so it only makes sense mounted once at a layout root (not nested inside a docs card). This showcase's own /system shell scrolls inside its own contained region rather than the window, so wrapping a demo here wouldn't reproduce the real product-page feel. Reach for it in an actual app/marketing root layout to feel the inertial scroll — it no-ops under prefers-reduced-motion and on the server, so it is always safe to wrap unconditionally.