Animated Feature Grid

Clean SaaS feature grid with IntersectionObserver stagger and accessible cards.

Scroll-staggered SaaS featuresClean SaaS feature grid with IntersectionObserver stagger and accessible cards.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: Sections
Category: Saas
Style: Minimal
Tech stack: GSAP
Animation: Scroll
Libraries: gsap
Difficulty: Beginner
License: Personal
Access: Free
Creator: Daniel Reed
Views: 331

Scroll
GSAP
React

Copy. Paste. Create.

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

Build an animated feature grid (3×2 desktop, 1-col mobile) with scroll reveal stagger. Each card: icon/mark, title, 2-line description. Cards are interactive containers (links). Reduced motion: no stagger, opacity 1. React + GSAP or CSS transitions.

Code

<!-- HTML -->
<div class="layers" id="L"><i data-d="12"></i><i data-d="24"></i><i data-d="40"></i></div>

/* CSS */
.layers{position:relative;width:100%;height:100%;overflow:hidden;background:#050505}.layers i{position:absolute;border-radius:50%;opacity:.55;filter:blur(8px)}.layers i:nth-child(1){width:40vmin;height:40vmin;left:15%;top:20%;background:hsl(203 85% 62%)}.layers i:nth-child(2){width:28vmin;height:28vmin;right:18%;top:35%;background:hsl(286 70% 55%)}.layers i:nth-child(3){width:18vmin;height:18vmin;left:45%;bottom:18%;background:#fff3}

// JS
var L=document.getElementById("L");window.addEventListener("pointermove",function(e){var r=L.getBoundingClientRect(),nx=(e.clientX-r.left)/r.width-.5,ny=(e.clientY-r.top)/r.height-.5;[].forEach.call(L.children,function(el){var d=+el.getAttribute("data-d");el.style.transform="translate("+(nx*d)+"px,"+(ny*d)+"px)"})});