Elliot Sutton

Glyph Background

Shaders 1

About

An animated WebGL background that renders a field of random characters lit by drifting glows, a cursor-following trail, and expanding ripple waves on click.

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

Code

How Glyph Background is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import { GlyphBackground } from "@/components/ui/backgrounds-glyph";

export default function GlyphBackgroundDemo() {
  return (
    <div className="relative w-full h-screen bg-background text-foreground">
      <GlyphBackground className="absolute inset-0" />
    </div>
  );
}

Dependencies

More by Elliot Sutton

View all
  • Notification List

    Notification List

    218
  • Scroll Progress

    Scroll Progress

    141
  • Cursor

    Cursor

    127
  • Pin List

    Pin List

    111
  • Radix Dropdown Menu

    Radix Dropdown Menu

    101
  • Flip Button

    Flip Button

    98
  • Bubble Background

    Bubble Background

    92
  • Avatar Group

    Avatar Group

    89

More in Shaders

View all
  • Glass Fold

    Glass Fold

    322
  • Phosphor 30

    Phosphor 30

    297
  • Shader Animation

    Shader Animation

    3.8K
  • Wave

    Wave

    698
  • NeonRGBTextEffect

    NeonRGBTextEffect

    149
  • Shader Background

    Shader Background

    2K
  • Paper design shader Background

    Paper design shader Background

    685
  • Black Hole

    Black Hole

    31