On-Command Grid Bloom

A skewed white grid blooms out of a lime light haze while pale dust motes drift and twinkle across the band, behind a bold heading and a flowing gradient CTA.

How it works

This rebuilds the background behind Meshy's "3D, On Command" call-to-action band at the bottom of the page. The composition is CSS/SVG plus one canvas particle layer.

The grid is an SVG <pattern> of 40×40 cells whose single L-shaped path M.5 40V.5H40 draws the left and top edge of each cell, rendered in white/5 with mix-blend-mode: overlay. The whole sheet is skewY(-18deg) and fade-masked top-to-bottom. On top sit 11 hand-placed "lit" cells at the captured coordinates [[14,4],[12,5],[16,6],[20,8],[22,9],[24,7],[3,3],[2,1],[7,3],[10,6],[12,2]].

The lime glow is a linear-gradient(to right, #e1f9a7/30, #c5f955/30) wash masked by radial-gradient(farthest-side at top, white, transparent) so it blooms from the top-center, plus a large blurred white blob (blur(26px)) as a soft volumetric core.

The dust motes are a <canvas> layer, matching the real site — which mounts a 1216×447 <canvas data-generated="true" aria-hidden="true"> inside an opacity-0 wrapper that fades in when the band scrolls into view. Sampling the live canvas shows roughly 1,600 lit pixels with a longest horizontal run of only 4–6px (small round motes, not panels), spread across 180 of 240 coarse buckets, with about 64% of buckets changing every 600ms — constant drift plus per-mote twinkle. Motes read as a pale lime-white, near rgb(237,255,196), at up to ~0.75 alpha. The recreation seeds a stable PRNG, scales mote count by area, and gives each mote an upward drift, a sine sway, and its own twinkle frequency; each is drawn as a small bright core inside a wider lime glow.

One deliberate divergence: on the live site the 11 lit grid cells are static — their computed opacity and fill never change and no CSS animation is bound. The gentle out-of-phase cell-flicker here is an addition; delete the .grid .lit rect rule to match the original exactly.

The CTA button matches the real one: a linear-gradient(155.056deg, #AAFFCA, #BAFF4A, #AAFFCA) at 200% size flowing via cta-flow (5s), and a conic-gradient border ring — masked with mask-composite: exclude to a 2px rim — spinning through a CSS @property --cta-border-angle over 7s. Accent green is Meshy's token --color-accent-base: #c5f955 on #0e0e0e. Fully self-contained; motion is disabled under prefers-reduced-motion.

How to use this file

This is a complete, self-contained HTML document — copy it verbatim rather than reconstructing it. Markdown version: https://fx.statico.io/effects/meshy-grid.md. Full writeup and live preview: https://fx.statico.io/demos/meshy-grid.

Source and credit

Effect originally seen on Meshy (https://www.meshy.ai/) — credit to Meshy AI. This is an independent recreation built from scratch for educational use; no proprietary source code was copied. Released under the Unlicense.

Terms used above are defined in the glossary. See also the site map, AGENTS.md and llms.txt.