{
  "name": "depth-text",
  "title": "Depth Text",
  "description": "Letterpress under a light from above: glyphs extruded down into the paper in warm ink layers, a hairline of edge-light kissing the top of every letter, and an optional subtle lean toward the cursor.",
  "category": "text",
  "install": {
    "command": "npx shadcn@latest add @clow/depth-text",
    "registryConfig": {
      "@clow": "https://clow.cards/r/{name}.json"
    }
  },
  "props": {
    "depth": {
      "type": "number",
      "default": 4,
      "min": 1,
      "max": 8,
      "step": 1,
      "description": "Extrusion steps below the glyphs. 3-4 for headlines, 7-8 only at display sizes."
    },
    "tilt": {
      "type": "boolean",
      "default": true,
      "description": "The block leans subtly toward the cursor and springs back when it leaves."
    },
    "children": {
      "type": "text",
      "default": "CLOW"
    }
  },
  "agent": {
    "prompt": "Use DepthText for a wordmark or one display-size headline that should feel physically pressed into the paper: it stacks warm ink shadows below the glyphs and a hairline of edge-light on their top edge. children must be a plain string; wrap it in your own heading and use bold display type: the extrusion needs heavy glyphs to hold onto. Scale depth with font size (4 at text-5xl, 7-8 only for very large marks) and set tilt={false} inside cards or dense layouts. Do NOT use it on body copy, buttons, or small text: at small sizes the extrusion reads as blur. The extrusion is static and stays under prefers-reduced-motion; only the tilt is disabled.",
    "examples": [
      "<h1 className=\"font-display text-6xl font-bold tracking-tight\"><DepthText depth={5}>CLOW</DepthText></h1>"
    ]
  },
  "registryDependencies": [
    "utils"
  ],
  "links": {
    "docs": "https://clow.cards/docs/depth-text",
    "markdown": "https://clow.cards/llms/depth-text.md",
    "registryItem": "https://clow.cards/r/depth-text.json"
  }
}
prop	type	default
depth	number	4
tilt	boolean	true
children	text	CLOW
Draw

Playground

Examples

Props
