Library Prompts

WebGL Experience

Prompt brief for a lightweight WebGL hero.

Prompt brief for a lightweight WebGL hero.将本资源作为视觉与交互简报使用。把 Prompt 复制到 AI 编程工具，再按你的产品调整布局、品牌语气与动效强度。

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