Smooth Reveal

Staggered line reveal with soft easing.

Staggered line reveal with soft easing.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: Luxury
Tech stack: GSAP
Animation: Scroll
Libraries: gsap
Difficulty: Beginner
License: Personal
Access: Free
Views: 782

Scroll
Text
GSAP

Copy. Paste. Create.

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

Staggered line reveal for editorial headlines. Content visible without JS.

Code

<!-- HTML -->
<div class="wrap"><button class="mag" type="button" id="mag">Magnetic CTA</button><div class="dot" id="dot"></div></div>

/* CSS */
body{display:grid;place-items:center}.wrap{position:relative;width:100%;height:100%;display:grid;place-items:center}.mag{appearance:none;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.04);color:#f5f5f5;padding:1rem 1.6rem;font:600 14px/1 system-ui;letter-spacing:.04em;border-radius:2px;cursor:pointer;transition:transform .2s cubic-bezier(.22,1,.36,1),border-color .2s,background .2s}.mag:hover{border-color:hsl(265 85% 62%);background:rgba(255,255,255,.08)}.dot{position:fixed;width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;background:hsl(265 85% 62%);pointer-events:none;mix-blend-mode:difference;opacity:0;transition:opacity .2s}

// JS
var b=document.getElementById("mag"),d=document.getElementById("dot"),tx=0,ty=0,x=0,y=0;window.addEventListener("pointermove",function(e){x=e.clientX;y=e.clientY;d.style.opacity="1";d.style.transform="translate("+x+"px,"+y+"px)";var r=b.getBoundingClientRect(),cx=r.left+r.width/2,cy=r.top+r.height/2,dx=e.clientX-cx,dy=e.clientY-cy,dist=Math.hypot(dx,dy);if(dist<120){tx=dx*.28;ty=dy*.28;b.style.transform="translate("+tx+"px,"+ty+"px)"}else{tx+=(0-tx)*.12;ty+=(0-ty)*.12;b.style.transform="translate("+tx+"px,"+ty+"px)"}});