Navbar Reveal

Compact nav that clarifies on scroll intent.

Compact nav that clarifies on scroll intent.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: Navigation
Style: Minimal
Tech stack: CSS
Animation: Scroll
Difficulty: Beginner
License: Personal
Access: Free
Views: 231

Scroll
CSS
JavaScript

Copy. Paste. Create.

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

Design a sparse sticky navbar with scroll state. Dark theme, one accent CTA.

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