Pixel Text Headline Animation

Text 21

About

Pixel text headline animation drawn in code, every pixel an SVG square: the letters fly in and assemble when the headline scrolls into view, step aside from the pointer and spring back, and a few pixels shimmer in the accent colour. Real text for screen readers, no font file, reduced-motion aware.

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

Code

How Pixel Text Headline Animation is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"use client"

import PixelHeadline from "@/components/ui/pixel-headline"

export default function Demo() {
  return (
    <div
      style={{
        width: "100%",
        minHeight: "100svh",
        display: "flex",
        flexDirection: "column",
        alignItems: "center",
        justifyContent: "center",
        gap: 28,
        padding: "48px 24px",
        background: "radial-gradient(70% 55% at 50% 45%, #23242c, #070708 70%)",
      }}
    >
      <PixelHeadline lines={["Describe an app", "We'll build it"]} assemble="load" />
      <p style={{ margin: 0, color: "rgba(255,255,255,.6)", fontSize: 15 }}>Move the pointer across the letters.</p>
    </div>
  )
}