Text Scramble

Headline scramble reveal with restrained motion.

Headline scramble reveal with restrained motion.Use this asset as a visual and interaction brief. Copy the prompt into your AI coding tool, then adapt layout, brand voice and motion intensity to your product.

Back to Library

Then paste it into your favorite AI coding tool.

Details

Type: Effects
Category: Typography
Style: Experimental
Tech stack: JAVASCRIPT
Animation: Text
Difficulty: Beginner
License: Personal
Access: Free
Views: 729

Text
JavaScript

Copy. Paste. Create.

This prompt is engineered to communicate visual direction, layout, interaction, animation and technical requirements.

Create a text scramble reveal for a single headline. Preferability: reduced-motion shows final text instantly.

Code

<!-- HTML -->
<p class="line" id="line"><span>Reveal</span></p>

/* CSS */
body{display:grid;place-items:center}.line{margin:0;font:700 clamp(2rem,7vw,3.5rem)/1 system-ui;letter-spacing:-.05em;overflow:hidden}.line span{display:inline-block;transform:translateY(110%);animation:up 1.1s cubic-bezier(.22,1,.36,1) .15s forwards;color:#f5f5f5}@keyframes up{to{transform:translateY(0)}}

// JS
var el=document.getElementById("line");setInterval(function(){var s=el.querySelector("span");s.style.animation="none";void s.offsetWidth;s.style.animation=""} ,3200);