Title: Skeleton Shimmer — Loading Clinic
Prompt: A loading clinic comparing shimmering skeleton placeholders against the real loaded feed. Clinicians replay the three-second load, pause the shimmer, switch wave, pulse, and static patterns, and tune shimmer speed. Calm stone, ink, and teal diagnostic styling.
Design: Diagnostic header with load controls beside side-by-side skeleton and loaded-feed boards in contrasting radii; skeleton rows use sweeping sheen pseudo-elements while the feed reveals posts with like pills; pattern ward switcher below.
Visual techniques:
- Sweeping linear sheen pseudo-element shimmer animation
- Pulse and static pattern variants via dynamic styles
- Timed skeleton-to-content swap with countdown
- Pause state freezing keyframes for motion sensitivity
- Responsive two-board to stacked layout
Interaction model: Replay restarts the load countdown and swaps boards; Pause freezes shimmer; speed slider retunes duration; pattern buttons switch wave, pulse, and static; like pills increment on click.