Components
Symbols Effect
A GPU halftone that rebuilds a photo or video out of little marks. The frame is pixelated into cells; each cell's luminance is bucketed into one of four brightness bands; and that band's symbol glyph (tiled once per cell) is stamped, tinted with the band's colour over a white ground — so the image is reassembled as tiny symbols. Runs live on video through a WebGL (three.js) shader. Fully configurable: cell size, source zoom, background colour, four band colours, four band symbols from a built-in glyph set (dot, ring, frame, star, heart, wave…), the three luminance edges between bands, and a paused flag to freeze the frame. Ships a self-contained glyph set and shaders; the only dependency is three.
"use client";
import SymbolsEffect from "@/components/ui/symbols-effect";
const settings = {
cell: 8,
zoom: 1,
bandColor: "#6d3bf5",
glyph: 4,
};
export default function Demo(props: Partial<typeof settings>) {
const s = { ...settings, ...props };
const bandColors = ["#241452", s.bandColor, "#a9c2ff", "#ffffff"];
const bandGlyphs = [s.glyph, 2, 1, 0];
return (
<div className="h-screen w-screen">
<SymbolsEffect
src="https://cdn.21st.dev/assets/stock/photo/1015.jpg"
cell={s.cell}
zoom={s.zoom}
bandColors={bandColors}
bandGlyphs={bandGlyphs}
/>
</div>
);
}