Slide examples / Motion

Gradient Lines Hero

Vertical light blinds rendered in WebGL via the GradientBlinds component from React Bits. A mouse-tracked spotlight sweeps across the bands, producing sharp venetian-blind lighting. Two gradient layers are composited with mix-blend-mode: lighten to keep the dark teal brand ground visible beneath the colour.

Usage

import GradientLinesHero from '@/components/GradientLinesHero';

<GradientLinesHero
  eyebrow="Kaptio"
  title={"The future of\ntravel technology."}
  subtitle="..."
  cta="Request a demo"
  ctaHref="/demo"
/>

Customisation

Pass any GradientBlinds prop through the hero to change the palette, angle, blind density, or distortion. The default palette is tuned to the Kaptio brand.

<GradientLinesHero
  gradientColors={['#FFBC42', '#032E36']}
  angle={159}
  blindCount={10}
  distortAmount={78}
/>