diff --git a/submissions/examples/ease-text-scramble/README.md b/submissions/examples/ease-text-scramble/README.md new file mode 100644 index 0000000000..994d7c5d4b --- /dev/null +++ b/submissions/examples/ease-text-scramble/README.md @@ -0,0 +1,26 @@ +# ease-text-scramble – Text Scramble Effect + +A text animation where characters randomly cycle through symbols and letters before resolving into the final text. Gives a hacker / decoder aesthetic. + +## EaseMotion classes used +- **Layout:** ease-container, ease-flex, ease-items-center, ease-justify-center, ease-min-h-screen +- **Background:** ease-bg-gray-900, ease-bg-black +- **Typography:** ease-text-3xl, ease-font-bold, ease-text-white, ease-text-gray-400, ease-text-2xl, ease-font-mono, ease-text-green-400, ease-text-sm, ease-text-gray-500 +- **Spacing:** ease-mb-4, ease-mb-8, ease-mt-6, ease-mt-8, ease-p-6 +- **Components:** ease-btn, ease-btn-primary +- **Hover Effects:** ease-hover-scale-105 +- **Animation:** ease-fade-in, ease-delay-200, ease-delay-500, ease-transition +- **Helpers:** ease-inline-block, ease-rounded-xl + +## How it works +- JavaScript tracks the elapsed time and the desired final text. +- Each frame, characters that have not yet "settled" are replaced with random characters from a predefined set. +- Once the progress reaches a character's position, it reveals the correct letter and stays fixed. +- The animation runs for 2 seconds by default; a button lets you replay it. +- The CSS provides a dark, green-on-black terminal style. +- The effect respects prefers-reduced-motion by skipping the scramble. + +## How to use +1. Copy the HTML, CSS, and JS into your project. +2. Ensure the path to easemotion.css is correct. +3. Open demo.html in any modern browser. diff --git a/submissions/examples/ease-text-scramble/demo.html b/submissions/examples/ease-text-scramble/demo.html new file mode 100644 index 0000000000..8a59817163 --- /dev/null +++ b/submissions/examples/ease-text-scramble/demo.html @@ -0,0 +1,74 @@ + + + + + + ease-text-scramble – Text Scramble Effect + + + + + +
+

+ Text Scramble +

+

+ Characters randomly cycle before settling — a hacker / decoder aesthetic. +

+ +
+ Hello, World! +
+ + + +

+ Minimal JS (~15 lines) drives the effect; CSS handles the green-on-black style. +

+
+ + + + + diff --git a/submissions/examples/ease-text-scramble/style.css b/submissions/examples/ease-text-scramble/style.css new file mode 100644 index 0000000000..50274bff3a --- /dev/null +++ b/submissions/examples/ease-text-scramble/style.css @@ -0,0 +1,24 @@ +/* ============================================================ + ease-text-scramble – Green-on-black hacker style + Minimal custom CSS; the core animation is in JS + ============================================================ */ + +/* Inline block for the scrambled text container */ +.ease-inline-block { + display: inline-block; +} + +/* Additional styling for the scrambled text area */ +.scramble-demo { + font-size: 1.8rem; + letter-spacing: 0.05em; + min-width: 12em; + text-align: center; +} + +/* Accessibility: respect reduced motion */ +@media (prefers-reduced-motion: reduce) { + .scramble-demo { + animation: none; + } +}