Prism Beam Hero
A raymarched glass prism on black: a white beam comes in from wherever your pointer is, a spectrum fans out the other side, and the prism turns once a minute. One shader, no libraries.
- Category
- Heroes
- Added
- 2026-09-25
- Deps
- none
- Updated
- 2026-09-25
This is a viberdy Pro component
The live preview, the props panel and the write-up are open to everyone. The full source, the AI prompt and CLI install are part of Pro.
WebGL · 4 KB of shader
Light, bent to order.
A raymarched prism, a beam that follows your pointer, and a spectrum that sweeps with it. One file, one canvas, no libraries.
Props
"use client";
import { useEffect, useRef } from "react";
/**
* PrismBeamHero — a glass prism on black, a white beam going in where your
* pointer points, and a spectrum coming out the other side.
*
* The prism is real geometry: a triangular prism raymarched in a fragment
* shader, turning once every fifty seconds, with Fresnel reflection and a
* per-channel refraction of its environment so its faces catch the beam in
* colour fringes. The light is drawn in screen space over it — a hard white
* beam with a soft halo, a lens flare where it enters, a fan of spectrum where
* it leaves, bent toward the base the way a prism bends light. Stars drift
* behind. Everything is additive light on OLED black, tone-mapped at the end.
*
* THE POINTER HOLDS THE LIGHT. Move across the hero and the beam swings to
* come from where you are; the spectrum sweeps with it. Idle, the beam drifts
// ---------------------------------------------------------------
// Full source available with a viberdy Pro subscription.
// https://viberdy.dev/pricing
// ---------------------------------------------------------------
}About this heroe
The glass prism splitting a beam of light has become the hero image of the GPU era, and almost every one is a looping video or a Spline embed. This one is rendered live. The prism is real geometry, a triangular prism raymarched in a fragment shader with Fresnel reflection and per-channel refraction, so its faces catch the beam in colour fringes as it turns once every fifty seconds. The light is drawn over it in screen space: a hard white beam with a soft halo, a lens flare where it meets the glass, and a fan of spectrum leaving the far face, bent toward the base the way a prism bends light. Everything is additive light on OLED black and tone-mapped at the end, so it reads as photography rather than graphics. The pointer holds the lamp. Move across the hero and the beam swings to come from where you are, eased so it feels carried; the spectrum sweeps with it. It renders at seventy percent resolution because soft light hides it, pauses off-screen, respects reduced motion and survives a lost context. The copy sits on top with one white pill button.
Curator’s note
The prism-and-beam hero is the current shorthand for 'we render things'. Ours is real geometry in a fragment shader, not a video, and the beam is yours to carry.
Pairs well with
Matched on shared tags and category — the entries most likely to be used alongside this one.
Ink Fluid Field
backgroundsA real Navier–Stokes fluid simulation on the GPU: your pointer drags luminous ink through dark water, and slow currents keep it alive when nobody is touching it.
Liquid Lens Hero
heroesA slab of liquid glass you drag across a vivid scene: the headline bends under its rim, colours split at the edge, and it wobbles like gel. Two WebGL passes, no libraries.
Spotlight Follow Background
backgroundsA full-bleed radial glow that tracks the cursor with zero re-renders.