CrazyGLCrazyGLHomeExploreGitHubBrowse heroesLoading hero…← Back to gallery@crazygl/chrome-y2k-wordmark

Chrome Y2K Wordmark

A huge mirror-chrome headline floating over a retro-future neon perspective grid. Star glints travel across the letters, gradient reflections shift with the pointer, and the whole thing reads as a Y2K poster you'd screenshot for your moodboard.

ReactWebGL3DInteractiveFont#three#3d#typography#chrome#y2k#retro-future#neon#vaporwave#premium#interactive

Usage

import ChromeY2KWordmark from '@crazygl/hero-chrome-y2k-wordmark';

export default function Page() {
  return (
    <ChromeY2KWordmark
      heading={'CYBER\n2099'}
      subheading="The internet, but make it fashion."
      ctaLabel="Enter the future"
      gridColor="#ff80c8"
    />
  );
}

Customise

  • Content — heading (use \n to stack lines), subheading, ctaLabel, onCTAClick.
  • Geometry — extrudeDepth, bevelSize, letterSpacing, headingY.
  • Chrome — chromeTint (F0 base reflectance), metalness, roughness.
  • Star Glints — glintCount, glintSize, glintBrightness, glintSpeed.
  • Background — bgGradientTop / bgGradientMid / bgGradientBottom sky stops, gridColor, gridStrength, gridSpeed.
  • Pointer — pointerParallax.
  • Typography — headingFontFamily (a real Google TTF is fetched and extruded), headingFontWeight.

Best for

  • Fashion-tech and streetwear drops
  • Music, festival, and event landing pages
  • Web3, gaming, and crypto product launches
  • Bold creative-studio or agency portfolios
01 · Install the package

One command, zero config.

npm install @crazygl/hero-chrome-y2k-wordmark
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 ChromeY2KWordmark from '@crazygl/hero-chrome-y2k-wordmark';

export default function Landing() {
  return (
    <ChromeY2KWordmark />
  );
}
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 ChromeY2KWordmark from '@crazygl/hero-chrome-y2k-wordmark';

export default function Page() {
  return (
    <section>
      <ChromeY2KWordmark
        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

Chrome Mascot Logo

Your logo or mascot reborn as a chunky Y2K chrome object floating over a sunset gradient with twinkling stars and slow anamorphic lens flares. Real PBR mirror metal lit by a procedural HDR environment.

Liquid Metal Typography

Heavy 3D headline rendered as molten chrome — letters wobble with FBM noise while staying readable, pointer creates localized ripples on the surface, and clicking triggers a quick splash wavefront. Floats over an image or video backdrop with a user-selectable HDRI driving the reflections.

Screenshot Reflected in Chrome Waves

A product screenshot floats above a slow liquid-chrome ocean. Stacked Gerstner waves stretch its reflection across the surface while specular highlights migrate with the crests; pointer movement emits single-wavefront wake rings that distort the mirror in real time.

Liquid Chrome Waves

An undulating ocean of liquid chrome. Six dispersive waves displace a mirror surface; a procedural studio HDRI stretches and warps across every crest.

Neon Tube Typography

A glowing neon-tube headline that flickers on, settles into a slow plasma breath, sparks on hover, and bends its glow toward the cursor. Rendered to a HiDPI canvas with rounded tube strokes plus stacked blurred copies for true additive bloom.

Light Cloth Mesh

A glowing silk sheet woven from neon threads filling the frame and waving in 3D. Drag the pointer across the silk and it leaves a natural rippling wake — each touch sends an expanding wavefront, and the faster you sweep the stronger the ripples. Cyan-to-magenta threads glow on near-black.Live customizer

Chrome Y2K Wordmark

Extrude Depth0.3How thick the letters are. Thin (0.1) reads as embossed; deep (0.6) reads as a chunky 3D sign.Bevel Size0.03Roundness of the edges. Bigger bevel = chubbier, more Y2K. Tiny bevel = razor-sharp industrial.Letter Spacing0.15emExtra tracking between letters. 0.1-0.25 is the wide fashion-display sweet spot.Heading Y position0.14worldVertical position of the chrome wordmark. Higher lifts it above centre; 0 centres it. Use newlines (\n) in the heading field to wrap long text across multiple lines instead of squeezing it.Chrome TintF0 base reflectance. Slightly cool by default; tint warm for gold, peach for rosé chrome.Metalness1Keep at 1.0 for true chrome. Below 0.7 reads as painted plastic, not metal.Roughness0.050.0-0.08 is mirror chrome; 0.15+ starts to read brushed/satin.Glint Count14Number of travelling star sparkles. 0 disables the layer; 30+ feels like a snow globe.Glint Size6pxOn-screen pixel size of each star sprite at depth=1.Glint Brightness1.6Peak twinkle intensity. >2 starts to bloom heavily.Glint Speed1How fast glints traverse and twinkle. 0 freezes the layer.Sky TopSky MiddleSky Bottom (horizon)Grid ColorGrid Strength0.5Visibility of the perspective grid. 0 hides it; 0.5-0.7 is the vaporwave sweet spot.Grid Speed0.7How fast the grid scrolls toward the camera. 0 freezes it.Pointer Parallax1.2How dramatically reflections shift with the pointer. 0 disables parallax; >1.5 feels seasick.Heading Font (3D wordmark)The selected Google font is fetched as a real TTF and extruded into the 3D chrome wordmark. 'Inherit' (and any font whose TTF can't be resolved) falls back to a bundled bold display face.Heading Weight900Picks the matching static weight of the chosen font (falls back to the nearest available).InteractivityWhich input drives the hero — try Scroll if you want the page to drive motion.CrazyGL · crazygl.comProgrammable hero sections for real websites.