Tile Breaker

Written for the variant you picked above: Paper

Build a page section that opens under a band of repeating tiles. Props: eyebrow, title, lead, primary and secondary {label, href}, points (strings), motif (one of three tile shapes), palette {ground, tile, onTile, ink, muted, line}, blur (on by default) and onNavigate. The band: two rows of identical tiles in the tile colour on the section ground, each tile clamp(46px, 6.4vw, 96px) wide and 0.78 of that tall, centred and clipped at the sides (render 30 columns so any width is covered). Each tile is one SVG path on a 100 × 100 grid stretched to the tile: a leaning leaf with two rounded corners (side by side, the gaps read as waves), a round-headed arch with a doorway, or three steps climbing to the right. When the section first scrolls into view (IntersectionObserver, 15%), every tile flips into place from −90° and 35% scale with a slight overshoot (620ms), delayed by (column + 2 × row) × 26ms so the band fills as a diagonal wave from the top-left. Under reduced motion the tiles are simply there. The body is centred, at most 62rem wide: a pill eyebrow with a hairline border and a small rotated square in the tile colour; the title (up to 4.6rem, weight 600, −0.045em, balanced, 17ch); a muted lead (54ch); two buttons side by side — a solid one in the tile colour with onTile text and a soft coloured shadow that lifts 1px on hover, and a hairline ghost one whose arrow nudges right on hover; then the points as one horizontal strip under a hairline, each with a small tinted check, divided by vertical hairlines. The foot: a mirrored copy of the band (flipped vertically) along the bottom edge, under a soft glow of the tile colour and a fade from the ground colour, then six stacked layers with backdrop-filter blur 1, 2, 4, 8, 16 and 32px, each masked by a linear gradient to its own overlapping slice, so the tiles grow steadily blurrier towards the bottom and the section ends in a soft blur. Use a container query: below 640px the buttons stack full width and the points stack as rows divided by horizontal hairlines. Selected variant — Paper (paper): Leaf tiles. Ground #efe9df, tile #b0441f, onTile #fbf7f0, ink #1d1712, muted #5e554c, line rgba(29, 23, 18, 0.14): warm bone with terracotta. 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: Scroll the section into view and the tiles flip in. The buttons lift and nudge on hover; focus is a 2px ring in the tile colour. Motion: Tiles flip in once with a staggered diagonal wave over about 1.6s; buttons ease over 160ms. Reduced motion shows the band without animation. Accessibility: A section labelled by its heading. The bands and the blur are decorative and hidden. Buttons are real links; the check marks are decorative and the points are a list. Every palette keeps text at 4.5:1 or better, including the button label on the tile colour. Responsive behavior: Tiles scale with the viewport and stay centred; a container query stacks the buttons and the points below 640px. Touch: Nothing depends on hover; the flip-in runs on scroll. 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

Scroll the section into view and the tiles flip in. The buttons lift and nudge on hover; focus is a 2px ring in the tile colour.

Motion

Tiles flip in once with a staggered diagonal wave over about 1.6s; buttons ease over 160ms. Reduced motion shows the band without animation.

Accessibility

A section labelled by its heading. The bands and the blur are decorative and hidden. Buttons are real links; the check marks are decorative and the points are a list. Every palette keeps text at 4.5:1 or better, including the button label on the tile colour.

Responsive

Tiles scale with the viewport and stay centred; a container query stacks the buttons and the points below 640px.

On touch

Nothing depends on hover; the flip-in runs on scroll.