Amber Silk Hero
Free React Hero Section built with WebGL, GLSL, CSS 3D.
A cinematic product hero built on the Silk Shader Coverflow V5 light field: a live WebGL2 ribbon of silk seen through fluted glass that ripples and refracts with the pointer. An optional badge, a large two-line headline whose second line glows in the palette colour, a supporting line, a white primary button with an arrow disc and a liquid glass play button sit in a soft beam of light that breathes behind the headline, with slow drifting light, a vignette framing the scene and a bright horizon glow the window rises out of, all in the palette colour. Below them an app window set in a thick liquid glass bezel rises in from the bottom edge, with traffic light dots, an address bar and a Full screen button: inside is a frosted, translucent client portal drawn in HTML with a sidebar, greeting, hours and retainer stats that count up, a segmented usage bar, a latest tasks table with priority flags and status chips, and a project status list whose bars fill in. Full screen lifts the window out of the layout to fill the hero over a dimmed, blurred scene; the button, a click on the scene or Escape restores it. The liquid glass, shared with Meadow Portal Hero, blurs and bends the scene behind it through an SVG displacement lens under a white tint, a soft gloss and an inner shade, with no rim, with layered shadows for depth (the bend shows in Chromium browsers; others get the frosted tint). The accent colours follow the chosen palette. Sized by container queries, the portal drops its sidebar and minor columns on narrow screens. Five background swatches beside the dashboard bell (Velvet Emerald, Deep Sapphire, Pulsar Amethyst, Solstice Rose, Royal Amber) relight the silk shader and every accent live.
More Hero Sections
- Lime Studio Hero – React Hero Section
- Ember Desk Hero – React Hero Section
- Perspective Dashboard Hero – React Hero Section
- Formline Studio Hero – React Hero Section
- Card Conveyor Upload Hero – React Hero Section
- Resonance Arch Hero – React Hero Section