Boiling Lines

Hand-drawn motion for artwork, SVG lines, and decorative borders.

Components / Boiling Lines

Surfacesmotionillustrationhand-drawn

Hand-drawn line motion with subtle, default, and intense presets.

Preview

Loading preview…

Usage

Hand-drawn motion for artwork, SVG lines, and decorative borders.

<BoilingLines intensity="subtle" speedMs={120}>
  <img src="/artwork.svg" alt="Hand-drawn studio mark" />
</BoilingLines>

Files

components/steez/BoilingLines.tsxfile

components/steez/BoilingLines.module.cssfile

Install package

pnpm add @steez-ui/theme @steez-ui/icons @steez-ui/ui

import { BoilingLines } from "@steez-ui/ui";

Install from registry

pnpm dlx shadcn@latest add https://steez-ui-6v5.pages.dev/r-steez/boiling-lines.json

Source files install at your project root. Import styles/steez/tokens.css once in your global stylesheet or root layout. No Steez packages needed.

import { BoilingLines } from "<project-root>/components/steez/BoilingLines";

Replace <project-root> with a relative path from your file.

Copy standalone file

/copy/steez/boiling-lines.tsxLoading…

Copy the entire generated TSX file into your React project. It embeds CSS, local helpers, icons, and theme fallbacks, so no Steez npm packages are required.

Open standalone source

Cyberpunk Tile

Cut-corner tile with dual-layer border (top-right + bottom-left clips).

Stroked Text

Outlined accent text with optional stroke-to-fill blink on mount.