---
name: text-reveal
description: "Reveal a heading once without damaging reading or accessibility. Use for typography, reveal, WAAPI."
---

# Text reveal

Reveal a heading once without damaging reading or accessibility.

## Implementation decisions

1. Keep accessible whole text and mark purely decorative duplicates aria-hidden.
2. Prefer line wrappers with a short stagger to per-character markup.
3. Use a visible default and IntersectionObserver for entrance detection.
4. Avoid font-dependent runtime splits or recompute after fonts load.

## Working source

Read [components/demos.tsx](../webcraft-shared/source/components/demos.tsx) when implementing this capability. The example belongs to the WEBCRAFT React/Three.js playground except the Python commerce starter, which runs without third-party dependencies. Use [shared catalog](../webcraft-shared/source/lib/catalog.ts) only to resolve related examples. Adapt the source to the target framework and preserve existing project conventions.

## Verify observable behavior

- Text remains visible without JavaScript.
- Screen readers do not announce individual letters.
- Reduced motion shows the final state.

## Scope

Use only the parts relevant to the requested task. This skill does not grant permission to publish, spend money, change account access or expose secrets. The original brief and environment rules remain authoritative.

Live example: https://webcraft-skill-library.undrgrnd.chatgpt.site/demos/reveal

Version 2.0.0 · Original WEBCRAFT content · MIT