Live Preview

Effects

滚动卡片揭示

Library Effects

滚动卡片揭示

卡片滚动揭示：错落、短行程、可减少动效。

列表入场卡片滚动揭示：错落、短行程、可减少动效。将本资源作为视觉与交互简报使用。把 Prompt 复制到 AI 编程工具，再按你的产品调整布局、品牌语气与动效强度。

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
632
  • 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.

Installation

Copy the prompt into your AI coding tool, then adapt colors and type to your brand.

License: Personal