Quiet FAQ
An accordion that animates open with grid-template-rows 0fr → 1fr, so content of any height opens smoothly without JavaScript measurement.
- Difficulty
- Standard
- Credits saved
- ~60
- Access
- Free
Technique
grid-template-rows: 0fr → 1fr transition with an overflow-hidden child. Icon rotates 45deg rather than swapping glyphs.
Choreography spec
none — interaction driven
- opengrid-template-rows 0fr → 1fr, 420ms on the stage curve
- iconrotate 0 → 45deg over the same window
Reversibility
Symmetrical open and close.
Reduced motion
Instant open and close, no transition.
Build a "quiet-faq" section for my landing page. TECHNIQUE grid-template-rows: 0fr → 1fr transition with an overflow-hidden child. Icon rotates 45deg rather than swapping glyphs. SPEC ██████████████████████████████████████████████ ██████████████████████████████████████ ████████████████████████████████████████████████████ RULES ████████████████████████████████████████████ ██████████████████████████████████████████████████
Full prompt copies straight to your clipboard.
Quiet FAQ
No. Every set piece is plain React plus CSS transforms driven by one rAF-throttled scroll listener. Nothing to install, nothing to keep in sync.
Yes. Values are pure functions of scroll position, so scrolling up rewinds the exact same frames rather than replaying an animation.
Pins release and each scene degrades to a composed static or natively scrollable layout under 768px.
Every scene ships a designed reduced-motion state — the final composition, not a blank box.