Library Sections

动效功能栅格

功能栅格配合滚动错落入场，层次清晰、不抢内容。

滚动错落入场功能栅格配合滚动错落入场，层次清晰、不抢内容。将本资源作为视觉与交互简报使用。把 Prompt 复制到 AI 编程工具，再按你的产品调整布局、品牌语气与动效强度。

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