Torn Paper

Written for the variant you picked above: Kraft

Build a section whose top edge is torn paper. Props: eyebrow, title, lead, note (a short handwritten aside), primary and secondary links {label, href}, palette {above, paper, core, ink, muted, accent, onAccent, note, noteInk}, seed, onNavigate and className. Tear (pure functions): a seeded jagged line across the width by midpoint displacement — each pass splits every segment and nudges the midpoint by a random amount up to the current roughness (40px to start, shrinking to 68% each pass) — resampled to a point every 4px around 55% of a 64px band; and short fibres, 1.5–5.5px, sticking up from about every third point at random angles. The band is an SVG as wide as the section (a ResizeObserver) on the colour above: first the paper's pale core — the edge lifted about 2–4px — with fibres in the core colour, then the paper body below the edge with a faint shadow, so a thin light rim shows along the tear. Over it, the strip still to be torn: the full band in the paper colour. When the section scrolls into view (once) the strip clears from the left with clip-path (1.5s, a slow start), and a small curled flap — a rounded, skewed, shaded piece of paper with a shadow — rides the tear point across and fades at the end. Without scripting or with reduced motion the tear is simply there. A faint two-dot grain lies over the paper. Body (container queries): centred eyebrow in spaced capitals, a large serif title, and the note on a sticky-note colour with a strip of translucent tape, tilted 4° and hung to the right of the title on wide screens, under it (tilted −2°) below 1100px, set in a handwriting face with cursive fallbacks. Then a muted lead and two pill links — the primary tilts a degree on hover. The section ends in a second, rougher tear back onto the colour above. Selected variant — Kraft (kraft): Kraft paper #c9a677 with a cream core #ead6b6 torn from a dark brown #2a221b section; dark brown ink #2a1c0f, a dark primary with cream text and a pale yellow note. This selection takes precedence over references to other themes or options in the general brief. Implement this selected appearance; do not add a variant picker or alternative appearances unless requested. Implementation requirements: Use React and TypeScript. Keep the component self-contained, with uniquely scoped CSS and no animation libraries. Include required imports, styles and font setup in the result. Interaction: The links work as normal; the paper tears itself once when the section scrolls into view. Motion: The tear runs across in 1.5s with a curling flap riding it. Reduced motion shows the torn edge at once. Accessibility: A labelled section with real links; the tear is decorative and hidden; the note is real text. Contrast holds in every palette, including on the note. Responsive behavior: The tear is rebuilt for any width; the note moves under the title on narrower screens. Touch: Nothing depends on hover. Preserve keyboard access, visible focus and reduced-motion behavior. Keep fictional demo data and simulated service calls in a separate usage example; expose callbacks for real actions and recover from rejected requests. Keep usage-example links inside the demo: use local buttons or prevent navigation. Demonstration links must not navigate to Vitrine routes or open other pages; preserve real URL support in the reusable component itself. Verify the result at narrow and wide viewport sizes, with keyboard input and reduced motion enabled.

Notes

Interaction

The links work as normal; the paper tears itself once when the section scrolls into view.

Motion

The tear runs across in 1.5s with a curling flap riding it. Reduced motion shows the torn edge at once.

Accessibility

A labelled section with real links; the tear is decorative and hidden; the note is real text. Contrast holds in every palette, including on the note.

Responsive

The tear is rebuilt for any width; the note moves under the title on narrower screens.

On touch

Nothing depends on hover.