An animation that can be used within text or a page to create a moment to pause. With a range of styles, sit back and take a moment to reflect.
“Rushing into action, you fail.
Trying to grasp things, you lose them.
Forcing a project to completion,
you ruin what was almost ripe.
Therefore the Master takes action
by letting things take their course.
He remains as calm at the end
as at the beginning.
He has nothing,
thus has nothing to lose.
What he desires is non-desire;
what he learns is to unlearn.
He simply reminds people
of who they have always been.
He cares about nothing but the Tao.
Thus he can care for all things.”
― Lao Tzu, Tao Te Ching
Telex project here.
Prompt
Create a WordPress Gutenberg block that provides calming visual breaks in long-form content through extremely subtle animations lasting 45-90 seconds each. In the editor, display a placeholder with selected animation preview and customization controls. On the frontend, show chosen animation with optional centered text like "Pause" or "Breathe".
Include six animation types: gentle gradient flows between pastel colors, slow organic shape morphing, breathing circles that expand and contract, floating particles drifting slowly, color waves moving across the block, and ambient light shifts between complementary colors.
Provide height options of 200px, 400px, 600px, or full viewport. Include preset color palettes for Ocean, Sunset, Forest, Lavender, and Neutral themes with custom color picker option. Allow animation duration controls from slow to glacial speeds.
Automatically detect and respect prefers-reduced-motion settings by displaying completely static versions with subtle gradients instead of animations. Include ARIA labels for screen readers and ensure no focus trapping or keyboard navigation interference.
Use only CSS animations and vanilla JavaScript for performance. Pause animations when blocks leave viewport to conserve resources. Make all animations GPU-accelerated and ensure zero flashing or rapid changes for seizure safety.
