Library Effects

Mask Reveal

Clip-path mask wiping content into place.

Clip-path mask wiping content into place.将本资源作为视觉与交互简报使用。把 Prompt 复制到 AI 编程工具，再按你的产品调整布局、品牌语气与动效强度。

Back to Library

Then paste it into your favorite AI coding tool.

Details

Type: Effects
Category: Scroll
Style: Editorial
Tech stack: CSS
Animation: Mask
Libraries: gsap
Difficulty: Beginner
License: Personal
Access: Free
Views: 279

Mask
CSS
GSAP

Copy. Paste. Create.

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

Build a mask reveal section using clip-path. Desktop only motion; static on reduced-motion.

Code

<!-- HTML -->
<p class="line" id="line"><span>Reveal</span></p>

/* CSS */
body{display:grid;place-items:center}.line{margin:0;font:700 clamp(2rem,7vw,3.5rem)/1 system-ui;letter-spacing:-.05em;overflow:hidden}.line span{display:inline-block;transform:translateY(110%);animation:up 1.1s cubic-bezier(.22,1,.36,1) .15s forwards;color:#f5f5f5}@keyframes up{to{transform:translateY(0)}}

// JS
var el=document.getElementById("line");setInterval(function(){var s=el.querySelector("span");s.style.animation="none";void s.offsetWidth;s.style.animation=""} ,3200);