Scroll Reveal Cards

Card cascade on scroll using IntersectionObserver—lightweight and accessible.

Intersection cascadeCard cascade on scroll using IntersectionObserver—lightweight and accessible.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: Saas
Style: Minimal
Tech stack: CSS
Animation: Scroll
Difficulty: Beginner
License: Personal
Access: Free
Creator: Daniel Reed
Views: 702

Scroll
CSS
JavaScript

Copy. Paste. Create.

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

Implement scroll-reveal cards with IntersectionObserver. Fade + 12px rise. Stagger children. Once only. Reduced motion: add .is-in immediately. No GSAP required.

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(194 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(194 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)"}});