Showcase8 specimens

Explore the arsenal.

Every motion and effect in a controlled environment. Change the props, watch it respond, copy the code. The controls are Corsair components too.

Specimen 01 · spotlight

Spotlight

A soft light that follows the pointer across a surface and along its nearest edge. Two CSS variables per frame, no re-renders.

Move your cursor over me

Keyboard focus inside lights it too.

<Spotlight asChild size={320} color="var(--brass)">
  <Card>…</Card>
</Spotlight>

Specimen 02 · animated-border

A light that sails the edge: one rotating conic-gradient layer on the compositor, paused while off screen.

Letter of marque

Granted to the bearer.

<AnimatedBorder duration={6} width={1} color="var(--brass)">
  …
</AnimatedBorder>

Specimen 03 · aurora

Slow light drifting behind content: three radial gradients moved with transforms, no blur filters, paused off screen.

Northern lights, tamed.

<Aurora
  colors={["var(--brass)","var(--sea)","#6d63c9"]}
  duration={20}
  intensity={0.35}
>
  …
</Aurora>

Specimen 04 · signature

SVG strokes drawn as if by hand. Longer strokes get a bigger share of the time, so the pen keeps a steady pace.

<Signature
  paths={wordmark.paths}
  viewBox="0 24 336 104"
  duration={3200}
  strokeWidth={1}
/>

Specimen 05 · magnetic

Pulls its content toward the mouse and springs it back on leave. The hit area never moves, and touch is left alone.

<Magnetic strength={0.35}>
  <Button>Pull me</Button>
</Magnetic>

Specimen 06 · text-reveal

Words that arrive one after another, or follow the scroll with a CSS timeline. Screen readers get the sentence in one piece.

Fair winds and following seas.

<TextReveal as="h2" stagger={60} duration={600}>
  Fair winds and following seas.
</TextReveal>

Specimen 07 · reveal

Content that moves into place when it scrolls into view. Server-rendered content stays visible until the browser confirms it is off screen.

Salvador

Cartagena

Havana

Nassau

Port Royal

<RevealGroup stagger={90}>
  {ports.map((port) => (
    <Reveal key={port} direction="up" distance={24}>…</Reveal>
  ))}
</RevealGroup>

Specimen 08 · parallax

Layers that drift at their own speed on CSS scroll-driven animations: no JavaScript, no scroll listener. Scroll inside the stage.

<Parallax offset={60}>…</Parallax>
<Parallax offset={20}>…</Parallax>
<Parallax offset={-30}>…</Parallax>