CrazyGLCrazyGLHomeExploreGitHubBrowse heroesLoading hero…← Back to gallery@crazygl/filament-ribbon

Filament Ribbon

A silk ribbon woven from hundreds of fine luminous strands undulates across the lower third of a dark hero, while teal and amber light travels along it and glowing beads ride the filaments. Faint blueprint grid, centered copy, CTA.

ReactWebGLInteractiveFont#ribbon#strands#wave#luminous#dark#webgl#landing-page#elegant#premium

Usage

import FilamentRibbon from '@crazygl/hero-filament-ribbon';

export default function Page() {
  return (
    <FilamentRibbon
      badgeText="New — v2.0 is here"
      heading="Motion that sells the story."
      subheading="A hand-crafted hero with light woven through it."
      ctaLabel="Get Started"
      onCTAClick="/signup"
    />
  );
}

Customise

  • Content — badgeText (pill above the heading), heading, subheading, ctaLabel + onCTAClick (URL string, or pass a function from code — same prop).
  • Ribbon — ribbonY (vertical position), ribbonWidth, strandCount (filament density), waveAmount, flowSpeed, glowStrength, showBeads.
  • Colors — tealColor / amberColor (the two traveling light pools), coreColor (white sweep), bgColor, gridOpacity for the faint blueprint grid behind the heading.

Best for

  • Template shops, design studios, and agency portfolios on dark themes.
  • Developer tools and infrastructure products wanting an elegant, quiet signature visual.
  • Any landing page that needs premium motion without stealing attention from the copy.
01 · Install the package

One command, zero config.

npm install @crazygl/hero-filament-ribbon
02 · Render the component

Import once, drop it in.

The component takes the same props you see in the live customizer on the right — every default ships poster-quality.

hero.tsx
import FilamentRibbon from '@crazygl/hero-filament-ribbon';

export default function Landing() {
  return (
    <FilamentRibbon />
  );
}
03 · Use it in a page

SSR-safe by default.

The wrapper renders static HTML on the server and only initialises the canvas after hydration, so search engines see your copy.

page.tsx
// app/page.tsx — works in SSR-first frameworks (Next, Remix, Astro, etc.)
'use client';

import FilamentRibbon from '@crazygl/hero-filament-ribbon';

export default function Page() {
  return (
    <section>
      <FilamentRibbon
        heading="Say hi."
        subheading="Your new hero."
      />
      <article>
        <h2>Welcome</h2>
        <p>Your content keeps its own voice below the hero.</p>
      </article>
    </section>
  );
}
You might also like

Similar heroes

Dither Gradient

A dark editorial hero lit by a single grainy warm gradient that ramps along one animated sine contour (no mirrored band). The contour breathes with a pseudo-random amplitude, and the giant wordmark is rendered into the same shader so it is revealed by the light — bright where the gradient washes over it, sinking into near-black shadow elsewhere. Quantised, dithered and grained for a retro/print texture.

Interactive Orb

A fluid iridescent marble floating in the dark. Domain-warped aurora currents — deep navy lobes, cyan pools, hot white folds — swirl across the sphere and flow toward your cursor, with fine contour ripples and filmic grain.

Paint Strokes

Thick glossy paint strokes sweep across the hero in slow motion. Each stroke has its own colour and gloss highlight.

Prism Cloud

A luminous chromatic cloud hero built with GLSL. Responds to scroll and pointer with refracted color light.

Particle Slider

A cinematic auto-playing slider built on one shared particle engine. Each slide picks a visualization — magnetic sphere, spiral galaxy, liquid wave field, vortex portal, image-to-particle, particle text, neural cloud, cube lattice, orbital rings, terrain — and the thousands of particles MORPH from one formation into the next instead of resetting. The field reacts to the pointer (repel / attract / magnetic). Per-slide heading, subheading, CTA, text transition and layout. Dark, premium, developer-grade.

Mouse Wave Text

A wave travels along the heading following the cursor — each letter pops up as the wave passes, then settles back. Switch to auto mode for a hands-off demo.Live customizer

Filament Ribbon

Ribbon Height0.3Vertical position of the ribbon, 0 = bottom of the hero.Ribbon Thickness0.5Strand Density26How many filament lines are woven across the ribbon.Wave Amount0.6Flow Speed1Glow0.7Glowing BeadsSmall bright nodes riding the strands.Cool LightWarm LightCore HighlightBackgroundBlueprint Grid0.35The faint grid behind the heading. 0 hides it.Heading FontInteractivityWhich input drives the hero — try Scroll if you want the page to drive motion.CrazyGL · crazygl.comProgrammable hero sections for real websites.