Design System

Scroll Animations

Scroll-triggered animations and parallax effects. Scroll down to see them in action.

Scroll Progress

Track scroll progress through a container and animate accordingly.

Scroll the page to see progress

const { scrollYProgress } = useScroll({
  target: containerRef,
  offset: ['start end', 'end start'],
});

const scaleX = useSpring(scrollYProgress);

<motion.div style={{ scaleX }} />

In View Detection

Detect when elements enter/exit the viewport. Essential for lazy-loading diagram sections.

🤖

Agent Node

⏳ Out of view

⚡

Action Node

⏳ Out of view

🪙

Token Node

⏳ Out of view

const ref = useRef(null);
const isInView = useInView(ref, { once: false, margin: '-100px' });

<motion.div
  ref={ref}
  animate={isInView ? { opacity: 1, x: 0 } : { opacity: 0, x: -50 }}
/>

Parallax Layers

Different scroll speeds create depth. Useful for layered diagram backgrounds.

🌐
📦
⚡
🎯
const { scrollYProgress } = useScroll({ target: ref });

const y1 = useTransform(scrollYProgress, [0, 1], [0, -100]);
const y2 = useTransform(scrollYProgress, [0, 1], [0, -200]);

<motion.div style={{ y: y1 }}>Background</motion.div>
<motion.div style={{ y: y2 }}>Foreground</motion.div>

Scroll-Linked Properties

Directly link any property to scroll position.

🔄
const rotate = useTransform(scrollYProgress, [0, 1], [0, 360]);
const scale = useTransform(scrollYProgress, [0, 0.5, 1], [0.5, 1.2, 0.5]);
const backgroundColor = useTransform(
  scrollYProgress,
  [0, 0.5, 1],
  ['red', 'green', 'blue']
);

<motion.div style={{ rotate, scale, backgroundColor }} />

Reveal on Scroll

Staggered word reveal as each enters the viewport.

Builddiagramsthatrevealasyouscroll✨
function RevealWord({ word }) {
  const ref = useRef(null);
  const isInView = useInView(ref, { once: true, margin: '-50px' });

  return (
    <motion.span
      ref={ref}
      initial={{ opacity: 0, y: 20 }}
      animate={isInView ? { opacity: 1, y: 0 } : {}}
    >
      {word}
    </motion.span>
  );
}