Motion & code

Showcase

The motion system, running live — plus a few sanitized snippets. Everything here is admin-selected, never an automated dump of the repository.

Live primitives

Pointer magnet

Follows the cursor within 120px, capped at 28px of travel. Disabled on touch and under reduced motion.

Hover me

Scroll reveal

Words below the read position sit at 0.25 opacity; only 2 transition at a time.

Scroll reveal maps each word to a slice of the section’s scroll progress, so the paragraph brightens as you read it rather than on a timer you cannot see.

Scroll-linked marquee

Rows drift in opposite directions from scroll position, never a timer — so nothing animates off-screen.

The sticky card stack is best seen in context on the projects page.

Three tiers

Motion budget

Tier 1 is instant feedback, Tier 2 is state change, Tier 3 is ambient. Every tier has a reduced-motion path.

  • tier2

    Modal enter/exit

    Tier 2 shared-layout transition with reduced-motion instant fallback.

  • tier1

    Card micro-feedback

    Tier 1 elevation and transform within the 90ms instant budget.

  • tier3

    Staggered list reveal

    Tier 3 ambient entrance — opacity and translateY only.

Read-only

Code snippets

Reduced-motion aware wrapper

tsx

import { useReducedMotion } from '@/components/motion/reduced-motion';
import { motionTokens } from '@atelier/design-tokens';

export function FadeIn({ children }: Readonly<{ children: React.ReactNode }>) {
  const reduceMotion = useReducedMotion();
  if (reduceMotion) return <>{children}</>;
  return (
    <motion.div
      initial={{ opacity: 0, y: 8 }}
      animate={{ opacity: 1, y: 0 }}
      transition={{ duration: motionTokens.tier2.duration, ease: motionTokens.tier2.easing }}
    >
      {children}
    </motion.div>
  );
}

Row-level company scoping

typescript

export function companyScopedWhere(user: AuthenticatedUser) {
  if (user.role === 'admin') return {};
  if (!user.companyId) throw new ForbiddenException('Missing company scope');
  return { companyId: user.companyId };
}

Try it

Playground

Open a modal and read the exact token values driving it.

Interactive playground

Toggle a modal to see live Tier 2 motion values from design tokens.