Prism Glass Hero

1. Add to your HTML <head>:

In your downloadThe working code for this step, in index.html.

The inline script is required. The hero markup is the fallback for no JavaScript, no WebGL and reduced motion, and without this probe it would paint for the half second three.js takes to arrive and then be replaced by the canvas. The probe runs before first paint, stamps html.gl when a canvas is coming, and the stylesheet hides the hero under that class until the canvas has drawn it. No JavaScript, no class, and the hero shows as normal.

2. Add the hero anywhere in your <body>:

In your downloadThe working code for this step, in index.html.

3. Add before the closing </body> tag:

In your downloadThe working code for this step, in index.html.

The script reads the hero, drops a canvas in front of it and hides the hero once the canvas is actually there.

If either download fails (three.js or GSAP), the shim and the script both hand the page back to your hero, so a blocked CDN never leaves a black stage.

Why the import map rather than a plain <script src> for three.js: three ships as ES modules only, and its old UMD build logs a deprecation warning on every page load. The shim imports it as a module (dynamically, so a blocked CDN falls back to your hero instead of a blank stage), puts it on window, and then loads assets/script.js as an ordinary script, so the effect stays a plain file you can drop into any build, or none.

Already using three.js as a module? Skip the shim and make sure window.THREE is set before assets/script.js runs:

In your downloadThe working code for this step, in script.js.

This effect has a real content requirement, and ignoring it is the main way to make it look broken. Glass only shows you what it bends, so it needs something with edges behind it. Over a flat colour it is nearly invisible, which is true of real glass too.

• Dense, high-contrast structure works; soft gradients do not. Type, architecture, weaves, foliage, grids and product edges all bend legibly. Skies, bokeh and smooth studio backdrops show nothing.
• Light content on a dark ground, or dark on light. Dispersion is a colour split along contrast edges; mid-grey on mid-grey splits into mud.
• Rest the glass mostly over the photograph. Over bare ground glass shows only its highlights. The demo parks it about two thirds over the photo, where the last word of the headline runs onto it, so at rest it bends both. Set the home with --glass-x and --glass-y (see Options).
• Images must be readable by the page. The hero is painted into a canvas the glass samples, and browsers refuse to hand WebGL an image from another origin unless that origin sends CORS headers. Serve photos from your own domain, or from a CDN that sends Access-Control-Allow-Origin and add crossorigin="anonymous" to the <img>. An image that fails this check is left out of the glass (the hero markup still shows it) rather than breaking the effect.
• Ungraded photographs. The glass adds its own tint, shadow and caustic; a heavily graded image goes muddy under them.

Test by throwing the glass hard across the busiest part of the hero, not at rest.

What the effect needs from your markup: a root with data-prism-glass containing one data-prism-glass-source element. Everything inside the source is painted into the scene: text (any element, any font the page has loaded, any colour, letter-spacing and text-transform), <img> elements (with their object-fit: cover, object-position and corner radius), inline <svg> marks, and elements with a solid background colour. Gradients, borders, shadows and CSS filters are not painted. An inline <svg data-prism-logo> anywhere in the root enables the Logo shape; without one, the Logo button hides itself. Shape buttons are any <button data-prism-shape="..."> inside the root.

What is only the demo's styling: the .hero-brand, .hero-copy, .hero-photo layout, the Halvard copy, the colours and the Mona Sans type are a demonstration hero. Replace them with your own layout entirely; the effect reads whatever the browser lays out. The prompt line and the shape switcher in .prism-glass__chrome are optional.

CSS the effect depends on:

• The root must have a real size. The canvas is sized from .prism-glass's clientWidth and clientHeight; in the demo it is position: absolute; inset: 0 inside a 100svh stage. Give it a height of 0 and you get a canvas of 0.
• The hero must keep its layout while hidden. .gl .prism-glass__source and .prism-glass.is-live .prism-glass__source hide it with clip-path: inset(50%), which keeps its boxes measurable and its text in the accessibility tree. Never change this to display: none, or there is nothing to measure.
• The root's background-color is the ground the hero is painted on. Set it to your page colour.
• touch-action: pan-y on .prism-glass keeps vertical page scrolling working on touch; the generated .prism-glass__handle (the invisible button over the glass) has touch-action: none so a finger can drag the glass.
• .prism-glass__chrome is hidden until .is-live, and fades in once the glass has landed (.is-settled): without WebGL there is no glass to change.
• Optional image scrim: --image-scrim (0 to 1) and --image-scrim-width (a fraction of the image's width) on an <img> or any ancestor lay the root's ground colour over the image's left edge, so type running onto the photo stays legible. The effect paints the scrim into the scene; the demo's .hero-photo__frame::after draws the same gradient for the fallback hero. Set --image-scrim: 0 to turn it off.

Set on the [data-prism-glass] root.

Set in CSS on .prism-glass (re-read on every resize, so media queries work):

Example: your logo, colourless, no throwing

In your downloadThe working code for this step, in index.html.

Example: a bigger lens parked on the photograph on phones

In your downloadThe working code for this step, in style.css.

About the logo shape

Any single-colour SVG with filled <path> elements works: M, L, H, V, C, S, Q, T, A and Z, absolute or relative. Holes are found by nesting, so the winding direction in your file does not matter. Convert strokes and text to outlines first (in Figma, Illustrator or Inkscape: Outline Stroke, Create Outlines). Bold marks read best as glass: a stroke thinner than about a tenth of the logo's width is mostly bevel and shows little refraction, and thin wordmarks read poorly. A compact symbol beats a full wordmark.

• Reduced motion: the WebGL scene never starts. The hero stays exactly as your markup and CSS compose it, a complete static hero with headline, copy and photograph. Turning reduced motion on while the page is open tears the scene down and shows the hero.
• Without JavaScript, or without WebGL: the same hero, for the same reason. One fallback, three failure modes, and it is never hidden until a canvas has actually been created.
• Screen readers: while the canvas is live the hero is clipped rather than removed, so the real headline and copy remain in the accessibility tree. The canvas itself is aria-hidden.
• Keyboard: the glass is a focusable button with a visible focus ring. Arrow keys flick it (the same physics as a throw), Enter or Space changes the shape, and shape changes are announced through a polite live region. The shape switcher buttons use aria-pressed.
• Touch: a finger on the glass drags and throws it; anywhere else on the hero scrolls the page.

No GSAP plugins. The renderer owns the frame loop: the throw physics, the pointer tilt and light, the idle sway and the speed-driven dispersion are continuous values computed each frame, and GSAP plays only the timed sequences.

Everything the effect uses (WebGLRenderer, ShaderMaterial, BufferGeometry, ExtrudeGeometry, Shape, CanvasTexture, WebGLRenderTarget, PerspectiveCamera) is long-stable three.js API, so pinning a different version is a one-line change in the import map.

Anything with WebGL, which is every current browser. Support is probed before three.js is asked for a renderer: three logs its own failure as console errors before it throws, so a visitor with WebGL disabled would otherwise get a console full of red on a page that had quietly fallen back. Probed first, that visitor simply gets the hero and a clean console.

Import maps are supported everywhere current. In a browser old enough to lack them the module never runs, window.THREE is never set, and the hero is again what shows.

The loop does not run at all while the hero is off screen, and the painted hero is only refreshed during the intro, on resize and when fonts finish loading, so at rest the cost is the glass itself. Pixel ratio is capped at 2 (1.5 on touch devices).

To buy back frames on low-end hardware, set data-quality="low" first; it is most of the cost. Then lower --glass-size, because the glass's cost grows with the area it covers.