EZPZ Type Fold

Heroes

About

Big ideas. Made EZPZ. Responsive native SVG typography folded across three planes. Customize each line, color and font through demo settings. MIT licensed for personal and commercial reuse; React is the only runtime dependency.

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

Code

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

Usage.tsx

import EZPZTypeFold from "@/components/ui/ezpz-type-fold";

// Change these values or use the live controls on 21st.dev.
const settings = {
  "firstLine": "BIG IDEAS.",
  "secondLine": "MADE",
  "thirdLine": "EZPZ.",
  "background": "#eae4d9",
  "ink": "#1736c7",
  "paper": "#fcf7ec",
  "fontFamily": "\"Helvetica Neue\", Arial, sans-serif"
};

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)", margin: "auto" }}>
    <EZPZTypeFold
      words={[s.firstLine, s.secondLine, s.thirdLine]}
      background={s.background}
      ink={s.ink}
      paper={s.paper}
      fontFamily={s.fontFamily}
    />
    </div>
  </div>;
}