Mask Reveal

Clip-path mask wiping content into place.

Clip-path mask wiping content into place.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: 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);