Pixel snail

Component

About

A one-colour pixel snail that crawls on a loop while something loads.

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

Code

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

Usage.tsx

"use client"

import {
  motion,
  useReducedMotion as usePrefersReducedMotion,
} from "motion/react"
import { PixelSnail } from "@/components/ui/pixel-snail"

// A highlight sweeps across the caption so it reads as work in progress.
function Shimmer({ children }: { children: string }) {
  const reduceMotion = usePrefersReducedMotion()
  if (reduceMotion) {
    return <span className="text-sm text-muted-foreground">{children}</span>
  }
  return (
    <motion.span
      className="bg-clip-text text-sm text-transparent"
      style={{
        backgroundImage:
          "linear-gradient(90deg, var(--color-muted-foreground) 35%, var(--color-foreground) 50%, var(--color-muted-foreground) 65%)",
        backgroundSize: "250% 100%",
      }}
      initial={{ backgroundPosition: "100% 0" }}
      animate={{ backgroundPosition: "0% 0" }}
      transition={{ duration: 1.6, repeat: Infinity, ease: "linear" }}
    >
      {children}
    </motion.span>
  )
}

export default function PixelSnailDemo() {
  return (
    <div className="flex w-full max-w-sm flex-col items-center gap-4 rounded-xl border border-border bg-card p-10 text-center">
      <PixelSnail size="lg" pace="fast" label="Loading your projects" />
      <Shimmer>Fetching your projects</Shimmer>
    </div>
  )
}