WebGL Experience

Prompt brief for a lightweight WebGL hero.

Prompt brief for a lightweight WebGL hero.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: Prompts
Category: Experimental
Style: Experimental
Tech stack: JAVASCRIPT
Animation: Distortion
Difficulty: Beginner
License: Personal
Access: Free
Views: 197

Distortion
JavaScript
WebGL

Copy. Paste. Create.

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

Prompt a lightweight WebGL hero experience with mouse displacement, pause offscreen, and image poster fallback on mobile.

Code

<!-- HTML -->
<div class="pc"><span class="tag">AI PROMPT</span><p>Design a cinematic dark landing with one accent and kinetic type…</p></div>

/* CSS */
.pc{width:100%;height:100%;padding:12%;box-sizing:border-box;display:flex;flex-direction:column;justify-content:flex-end;background:linear-gradient(180deg,#101010,#050505);border-left:3px solid hsl(174 85% 62%)}.tag{font:700 10px/1 system-ui;letter-spacing:.2em;color:hsl(174 85% 62%)}.pc p{margin:.8rem 0 0;font:500 13px/1.55 system-ui;color:rgba(255,255,255,.72);max-width:28ch}

// JS