Malay Patel

Ascii Field

Shaders 3

About

A slow field of light drawn as type, glyphs thickening where it brightens; the pointer brings a lens that reshuffles them. WebGL background, free from uibrik (uibrik.com).

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

Code

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

Usage.tsx

"use client";

import { AsciiField } from "@/components/ui/ascii-field";

export default function Demo() {
  return <AsciiField className="h-screen w-full" />;
}

More by Malay Patel

View all
  • Halftone

    Halftone

    6
  • Balloon Button

    Balloon Button

    5
  • Fold Toolbar

    Fold Toolbar

    2
  • Halftone Horizon

    Halftone Horizon

    2
  • Oil Slick

    Oil Slick

    2
  • Otp Input

    Otp Input

More in Shaders

View all
  • Glass Fold

    Glass Fold

    366
  • Shader Animation

    Shader Animation

    3.8K
  • Wave

    Wave

    706
  • Illos Knowledge Sources

    Illos Knowledge Sources

    18
  • Phosphor 30

    Phosphor 30

    302
  • Old Television Shader

    Old Television Shader

    411
  • Shader Lines

    Shader Lines

    2.4K
  • ReactionDiffusionGenesis

    ReactionDiffusionGenesis

    10