Feature Strip

Horizontal feature beats with quiet motion.

Horizontal feature beats with quiet motion.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: Features
Style: Editorial
Tech stack: CSS
Animation: Scroll
Difficulty: Beginner
License: Personal
Access: Free
Views: 687

Scroll
CSS
HTML

Copy. Paste. Create.

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

Three-feature strip section, editorial type, no cards in the hero sense—flat rhythm.

Code

<!-- HTML -->
<div class="ed"><p>01</p><h1>Editorial</h1><div class="bar"></div></div>

/* CSS */
.ed{width:100%;height:100%;padding:10%;box-sizing:border-box;display:flex;flex-direction:column;justify-content:center;background:#070707}.ed p{margin:0;font:600 11px/1 system-ui;letter-spacing:.2em;color:hsl(73 85% 62%)}.ed h1{margin:.6rem 0 1rem;font:700 clamp(1.8rem,7vw,3rem)/1 system-ui;letter-spacing:-.06em;max-width:8ch}.bar{height:2px;width:48%;background:linear-gradient(90deg,hsl(73 85% 62%),transparent);transform-origin:left;animation:grow 1.2s cubic-bezier(.22,1,.36,1) forwards}@keyframes grow{from{transform:scaleX(0)}to{transform:scaleX(1)}}

// JS