Library Backgrounds

Grid Warp

Perspective grid that warps toward the pointer.

Perspective grid that warps toward the pointer.将本资源作为视觉与交互简报使用。把 Prompt 复制到 AI 编程工具，再按你的产品调整布局、品牌语气与动效强度。

Back to Library

Then paste it into your favorite AI coding tool.

Details

Type: Backgrounds
Category: Abstract
Style: Experimental
Tech stack: CSS
Animation: Cursor
Difficulty: Beginner
License: Personal
Access: Free
Views: 313

Cursor
CSS
JavaScript

Copy. Paste. Create.

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

Interactive grid warp background using CSS mask and pointer position.

Code

<!-- HTML -->
<div class="n"><div class="wash"></div><p>Grain Field</p></div>

/* CSS */
.n{position:relative;width:100%;height:100%;display:grid;place-items:center;background:#080808}.wash{position:absolute;inset:0;background:radial-gradient(circle at 40% 30%,hsl(98 85% 62%)33,transparent 50%),radial-gradient(circle at 70% 60%,hsl(196 70% 55%)22,transparent 45%);opacity:.9}.n p{position:relative;margin:0;font:600 13px/1 system-ui;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.55)}.n::after{content:"";position:absolute;inset:0;opacity:.35;pointer-events:none;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E")}

// JS