EZPZ Chrome Type

Heroes 1

About

Make your words shine. Editable chrome lettering with a distance-field bevel, sharp reflected bands and cast shadow. Customize both lines, tint, bevel, reflections and background. Native browser font rendering; React-only; MIT licensed.

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

Code

How EZPZ Chrome Type is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import EZPZChromeType from "@/components/ui/ezpz-chrome-type";

// Edit these defaults; 21st.dev also exposes live controls.
const settings = {
  "firstLine": "EZ",
  "secondLine": "PZ",
  "background": "#1821ad",
  "tint": "#bccde8",
  "bevel": 22,
  "reflection": 0
};

export default function Demo(props: Partial<typeof settings>) {
  const s = { ...settings, ...props };
  return <div style={{ width: "100%", minHeight: "100svh", background: s.background, display: "grid", placeItems: "center" }}>
    <div style={{ width: "100%", maxWidth: "min(720px, 80svh)" }}>
      <EZPZChromeType {...s} />
    </div>
  </div>;
}