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.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Symbols Effect to your project and fits it to your theme.

"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>
  );
}