On-Command Grid Bloom
Seen on Meshy · credit Meshy AI
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.
Code — copy & paste this whole file
<!doctype html>
<!--
Meshy — "3D, On Command" hero/CTA section background
─────────────────────────────────────────────────────────────────────────────
Rebuild of the background behind Meshy's "3D, On Command" call-to-action band
at the bottom of https://www.meshy.ai/. The composition is CSS/SVG plus one
canvas particle layer:
• a 40px SVG <pattern> grid, skewed skew-y(-18deg), drawn in white/5 with
mix-blend-overlay, fading out top→bottom via a linear-gradient mask;
• 11 hand-placed "lit" grid cells (white/5) at fixed [col,row] coordinates;
• a lime gradient wash from #e1f9a7/30 → #c5f955/30 masked by a
radial-gradient(farthest-side at top) so it blooms from the top center;
• a big blurred white blob (blur 26px) as a soft volumetric light core;
• a full-bleed <canvas> of drifting, twinkling dust motes;
• the whole group sits at low opacity over a near-black background.
The canvas layer was measured off the live site: a 1216x447 <canvas
data-generated="true" aria-hidden="true"> inside an `opacity-0` wrapper that
fades in when the band scrolls into view. Sampling it shows ~1.6k lit pixels,
a longest horizontal run of only 4-6px (so: small round motes, not panels),
spread across 180 of 240 coarse buckets, with ~64% of buckets changing every
600ms — constant drift plus per-mote twinkle. Mote colour reads as a pale
lime-white (~rgb(237,255,196)) at up to ~0.75 alpha.
On the live site the 11 lit grid cells are static (computed opacity and fill
never change, no CSS animation bound). The gentle panel flicker below is a
deliberate addition, not a reproduction — drop the `.grid .lit` animation if
you want to match the original exactly.
The CTA button matches the real one: a flowing lime gradient (cta-flow, 5s)
and a conic-gradient border ring that spins (7s). Everything below is
self-contained — no CDN, no fonts, no images. Static values extracted from
the Meshy build chunk 11wz9_xx-0j_m.js and stylesheet 14ac6qycc6c_g.css.
-->
<html lang="en">
<head>
<link rel="icon" href="data:,">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Meshy — 3D, On Command</title>
<!-- a14y:begin head — machine-readable metadata; safe to delete when copying -->
<meta name="description" content="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.">
<link rel="canonical" href="https://fx.statico.io/effects/meshy-grid.html">
<link rel="alternate" type="text/markdown" href="https://fx.statico.io/effects/meshy-grid.md" title="On-Command Grid Bloom (Markdown)">
<meta property="og:type" content="website">
<meta property="og:site_name" content="cool web fx">
<meta property="og:title" content="On-Command Grid Bloom">
<meta property="og:description" content="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.">
<meta property="og:url" content="https://fx.statico.io/effects/meshy-grid.html">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="On-Command Grid Bloom">
<meta name="twitter:description" content="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.">
<script type="application/ld+json">{"@context":"https://schema.org","@graph":[{"@type":"SoftwareSourceCode","@id":"https://fx.statico.io/effects/meshy-grid.html#effect","name":"On-Command Grid Bloom","url":"https://fx.statico.io/effects/meshy-grid.html","abstract":"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.","description":"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.","programmingLanguage":"HTML","codeSampleType":"full solution","runtimePlatform":"Web browser","codeRepository":"https://github.com/statico/cool-web-fx","license":"https://unlicense.org/","isBasedOn":"https://www.meshy.ai/","mainEntityOfPage":"https://fx.statico.io/demos/meshy-grid","dateModified":"2026-07-27T18:42:10-07:00","inLanguage":"en"},{"@type":"BreadcrumbList","@id":"https://fx.statico.io/effects/meshy-grid.html#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://fx.statico.io/"},{"@type":"ListItem","position":2,"name":"On-Command Grid Bloom","item":"https://fx.statico.io/demos/meshy-grid"},{"@type":"ListItem","position":3,"name":"Standalone source","item":"https://fx.statico.io/effects/meshy-grid.html"}]}]}</script>
<style>.a14y-doc{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}</style>
<!-- a14y:end head -->
<style>
/* @property lets the conic border angle animate (real site uses this) */
@property --cta-border-angle { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
:root {
--bg: #0e0e0e; /* --color-bg-strong */
--bg2: #181818; /* --color-bg-base */
--accent: #c5f955; /* --color-accent-base */
--accent-light: #e1f9a7;
}
html, body {
width: 100%;
height: 100%;
overflow: hidden;
background: var(--bg);
font-family: "Inter Tight", Inter, -apple-system, BlinkMacSystemFont,
"Segoe UI", Roboto, system-ui, sans-serif;
}
/* ── Full-bleed section ─────────────────────────────────────────────── */
.section {
position: relative;
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 60px;
/* faint top-down lift toward the bloom, like the section gradient */
background:
radial-gradient(120% 80% at 50% -10%, #15170f 0%, var(--bg) 45%),
var(--bg);
overflow: hidden;
}
/* ── Background light group ─────────────────────────────────────────────
Real site renders this group at opacity 0.15. It is lifted here so the
grid + bloom actually read in the gallery thumbnail; colours, geometry,
masks and relative layer opacities are kept exactly as captured. ────── */
.bg {
position: absolute;
inset: 0;
z-index: 0;
opacity: 0.5;
pointer-events: none;
/* outer radial mask: radial-gradient(800px 400px at top, white 20%, transparent) */
-webkit-mask-image: radial-gradient(800px 400px at top, #fff 20%, transparent);
mask-image: radial-gradient(800px 400px at top, #fff 20%, transparent);
}
/* The skewed "beam" that holds the grid + lime wash.
Real: top-0 left-1/2 -ml-152 h-100 w-325 → width 1300px, height 400px. */
.beam {
position: absolute;
top: 0;
left: 50%;
width: 1300px;
height: 400px;
transform: translateX(-50%);
/* fade the whole beam top→bottom */
-webkit-mask-image: linear-gradient(#fff, transparent);
mask-image: linear-gradient(#fff, transparent);
}
/* Lime gradient wash, masked to bloom from the top-centre. */
.wash {
position: absolute;
inset: 0;
background: linear-gradient(to right,
rgba(225, 249, 167, 0.30), /* #e1f9a7 / 30 */
rgba(197, 249, 85, 0.30)); /* #c5f955 / 30 */
-webkit-mask-image: radial-gradient(farthest-side at top, #fff, transparent);
mask-image: radial-gradient(farthest-side at top, #fff, transparent);
}
/* The grid SVG: -inset-y-1/2 h-[200%], skewed -18deg, mix-blend overlay. */
.grid {
position: absolute;
left: 0;
right: 0;
top: -50%;
width: 100%;
height: 200%;
transform: skewY(-18deg);
fill: rgba(255, 255, 255, 0.05); /* fill-white/5 → lit cells */
stroke: rgba(255, 255, 255, 0.05); /* stroke-white/5 → grid lines */
mix-blend-mode: overlay;
overflow: visible;
}
/* ── Dust motes ─────────────────────────────────────────────────────────
Its own layer, NOT inside .bg — on the real site the canvas sits in a
sibling `absolute inset-0 size-full` wrapper, so it escapes the beam mask
and the 0.5 group opacity and covers the whole band. */
.motes {
position: absolute;
inset: 0;
z-index: 0;
width: 100%;
height: 100%;
pointer-events: none;
/* keep motes densest under the bloom, thinning toward the bottom */
-webkit-mask-image: linear-gradient(#fff 30%, rgba(255,255,255,0.45) 65%, transparent);
mask-image: linear-gradient(#fff 30%, rgba(255,255,255,0.45) 65%, transparent);
}
/* Lit grid cells. The slow brightness flicker is an addition — see the
note at the top of this file; the real site's cells are static. */
.grid .lit rect {
animation: cell-flicker 7s ease-in-out infinite;
}
@keyframes cell-flicker {
0%, 100% { opacity: 0.55; }
40% { opacity: 1; }
62% { opacity: 0.7; }
}
/* Soft white volumetric light core (real: blurred path, blur 26px). */
.lightblob {
position: absolute;
top: -40px;
left: 50%;
width: 1113px;
transform: translateX(-50%);
fill: #fff;
filter: blur(26px);
opacity: 0.5;
}
/* ── Heading ────────────────────────────────────────────────────────── */
.heading {
position: relative;
z-index: 1;
color: #fff; /* --color-label-title */
font-weight: 700;
font-size: clamp(2.4rem, 9vw, 7rem);
line-height: 1.2;
letter-spacing: -0.01em;
text-align: center;
filter: drop-shadow(0 6px 18px rgba(0, 0, 0, 0.5)); /* drop-shadow-lg */
}
.heading .accent { color: var(--accent); }
/* ── CTA button (flowing lime gradient + spinning conic ring) ───────── */
.cta {
position: relative;
z-index: 1;
display: inline-flex;
align-items: center;
gap: 10px;
height: 50px;
padding: 0 25px 0 30px;
border: 0;
border-radius: 9999px;
cursor: pointer;
user-select: none;
font: 700 18px/1.1 inherit;
letter-spacing: -0.02em;
color: #000; /* --color-accent-label */
/* real: linear-gradient(155.056deg,#AAFFCA 0%,#BAFF4A 50%,#AAFFCA 100%) */
background: linear-gradient(155.056deg, #AAFFCA 0%, #BAFF4A 50%, #AAFFCA 100%);
background-size: 200% 200%;
animation: cta-flow 5s ease-in-out infinite;
transition: box-shadow 0.3s ease-out;
}
.cta:hover {
background: linear-gradient(155.056deg, #BAFF4A 0%, #AAFFCA 50%, #BAFF4A 100%);
box-shadow: 0 0 30px rgba(170, 255, 202, 0.35);
}
/* Conic-gradient border ring, masked to just the 2px rim, spins 7s. */
.cta .ring {
pointer-events: none;
position: absolute;
inset: 0;
border-radius: 9999px;
padding: 2px;
background: conic-gradient(from var(--cta-border-angle),
#fff0 0deg, #fffffff2 45deg, #fff0 95deg, #fff0 360deg);
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
animation: cta-border-spin 7s linear infinite;
}
/* Looping arrow */
.cta .arrowbox { position: relative; display: inline-flex; width: 20px; height: 20px; overflow: hidden; }
.cta .arrows {
display: inline-flex; width: 40px; flex-shrink: 0; transform: translateX(-20px);
}
.cta:hover .arrows { animation: cta-arrow-loop 1.5s linear infinite; }
.cta .arrows svg { width: 20px; height: 20px; flex-shrink: 0; }
@keyframes cta-flow {
0%, 100% { background-position: 0 0; }
50% { background-position: 100% 100%; }
}
@keyframes cta-border-spin { to { --cta-border-angle: 360deg; } }
@keyframes cta-arrow-loop { to { transform: translateX(0); } }
@media (prefers-reduced-motion: reduce) {
.cta, .cta .ring, .grid .lit rect { animation: none; }
}
</style>
</head>
<body>
<!-- a14y:begin body — visually hidden description; safe to delete when copying -->
<div class="a14y-doc">
<h1>On-Command Grid Bloom</h1>
<p>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.</p>
<h2>How it works</h2>
<p>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.</p>
<p>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]].</p>
<p>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.</p>
<p>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.</p>
<p>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.</p>
<p>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.</p>
<h2>How to use this file</h2>
<p>This is a complete, self-contained HTML document — copy it verbatim rather than reconstructing it. Markdown version: <a href="https://fx.statico.io/effects/meshy-grid.md">https://fx.statico.io/effects/meshy-grid.md</a>. Full writeup and live preview: <a href="https://fx.statico.io/demos/meshy-grid">https://fx.statico.io/demos/meshy-grid</a>.</p>
<h2>Source and credit</h2>
<p>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.</p>
<h2>More</h2>
<p>Terms used above are defined in the <a href="https://fx.statico.io/glossary">glossary</a>. See also the <a href="https://fx.statico.io/sitemap.md">site map</a>, <a href="https://fx.statico.io/AGENTS.md">AGENTS.md</a> and <a href="https://fx.statico.io/llms.txt">llms.txt</a>.</p>
</div>
<!-- a14y:end body -->
<section class="section">
<!-- ── Dust motes (own layer, above the light group) ────────────────── -->
<canvas class="motes" aria-hidden="true"></canvas>
<!-- ── Background light group (grid + lime bloom + light core) ──────── -->
<div class="bg">
<!-- soft white volumetric core behind the heading -->
<svg class="lightblob" viewBox="0 0 1113 440" aria-hidden="true">
<path d="M.016 439.5s-9.5-300 434-300S882.516 20 882.516 20V0h230.004v439.5H.016Z"></path>
</svg>
<!-- skewed beam: lime wash + the grid pattern -->
<div class="beam">
<div class="wash"></div>
<svg class="grid" aria-hidden="true">
<defs>
<!-- 40×40 grid cell; the L-shaped path draws left + top edges -->
<pattern id="meshyGrid" width="40" height="40" patternUnits="userSpaceOnUse" x="-12" y="4">
<path d="M.5 40V.5H40" fill="none"></path>
</pattern>
</defs>
<rect width="100%" height="100%" stroke-width="0" fill="url(#meshyGrid)"></rect>
<!-- 11 lit cells, offset (-12,4) to match the pattern origin.
Staggered negative delays so they flicker out of phase. -->
<svg x="-12" y="4" class="overflow-visible lit">
<rect stroke-width="0" width="41" height="41" x="560" y="160" style="animation-delay:-0.0s"></rect>
<rect stroke-width="0" width="41" height="41" x="480" y="200" style="animation-delay:-2.6s"></rect>
<rect stroke-width="0" width="41" height="41" x="640" y="240" style="animation-delay:-5.1s"></rect>
<rect stroke-width="0" width="41" height="41" x="800" y="320" style="animation-delay:-1.3s"></rect>
<rect stroke-width="0" width="41" height="41" x="880" y="360" style="animation-delay:-3.9s"></rect>
<rect stroke-width="0" width="41" height="41" x="960" y="280" style="animation-delay:-6.2s"></rect>
<rect stroke-width="0" width="41" height="41" x="120" y="120" style="animation-delay:-0.8s"></rect>
<rect stroke-width="0" width="41" height="41" x="80" y="40" style="animation-delay:-4.4s"></rect>
<rect stroke-width="0" width="41" height="41" x="280" y="120" style="animation-delay:-2.0s"></rect>
<rect stroke-width="0" width="41" height="41" x="400" y="240" style="animation-delay:-5.7s"></rect>
<rect stroke-width="0" width="41" height="41" x="480" y="80" style="animation-delay:-3.2s"></rect>
</svg>
</svg>
</div>
</div>
<!-- ── Foreground content ───────────────────────────────────────────── -->
<h2 class="heading">3D, <span class="accent">On Command</span></h2>
<button class="cta" type="button">
<span class="ring" aria-hidden="true"></span>
Start Creating
<span class="arrowbox" aria-hidden="true">
<span class="arrows">
<svg viewBox="0 0 24 24" fill="none" stroke="#000" stroke-width="2.4"
stroke-linecap="round" stroke-linejoin="round">
<path d="M5 12h13M13 6l6 6-6 6"></path>
</svg>
<svg viewBox="0 0 24 24" fill="none" stroke="#000" stroke-width="2.4"
stroke-linecap="round" stroke-linejoin="round">
<path d="M5 12h13M13 6l6 6-6 6"></path>
</svg>
</span>
</span>
</button>
</section>
<script>
// ── Dust motes ────────────────────────────────────────────────────────
// Small pale-lime particles that drift up and sway, each twinkling on its
// own sine. Density, size and colour are taken from the measurements in the
// header comment: ~4-6px motes, pale lime-white, up to ~0.75 alpha, spread
// across the whole band and densest under the bloom.
(function () {
const canvas = document.querySelector('.motes');
const ctx = canvas.getContext('2d');
const reduced = matchMedia('(prefers-reduced-motion: reduce)').matches;
// Mote count scales with area so the density matches at any viewport.
// Tuned against the live canvas: ~0.3% lit-pixel coverage. Slightly
// brighter than the original so the field still reads in a thumbnail.
const DENSITY = 150 / (1216 * 447);
let motes = [];
let w = 0, h = 0, dpr = 1;
// Deterministic PRNG so the layout is stable across reloads/screenshots.
let seed = 0x9e3779b9;
const rnd = () => (((seed = (seed * 1664525 + 1013904223) >>> 0) / 4294967296));
function build() {
const rect = canvas.getBoundingClientRect();
dpr = Math.min(window.devicePixelRatio || 1, 2);
w = Math.max(1, rect.width);
h = Math.max(1, rect.height);
canvas.width = Math.round(w * dpr);
canvas.height = Math.round(h * dpr);
ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
seed = 0x9e3779b9;
const count = Math.round(w * h * DENSITY);
motes = Array.from({ length: count }, () => ({
x: rnd() * w,
y: rnd() * h,
r: 0.5 + rnd() * 1.1, // 1-3.2px across, plus glow
drift: 3 + rnd() * 9, // px/sec upward
sway: 6 + rnd() * 14, // px of horizontal travel
swaySpeed: 0.15 + rnd() * 0.35,
phase: rnd() * Math.PI * 2,
twinkle: 0.5 + rnd() * 1.1, // twinkle cycles/sec
base: 0.18 + rnd() * 0.38, // baseline alpha
}));
}
function draw(t) {
ctx.clearRect(0, 0, w, h);
for (const m of motes) {
// upward drift, wrapping at the top
const y = ((m.y - m.drift * t) % h + h) % h;
const x = m.x + Math.sin(t * m.swaySpeed + m.phase) * m.sway;
// per-mote twinkle, never fully dark
const a = m.base * (0.55 + 0.45 * Math.sin(t * m.twinkle * Math.PI * 2 + m.phase));
// soft glow: a wide faint disc under a small bright core
const g = ctx.createRadialGradient(x, y, 0, x, y, m.r * 3);
g.addColorStop(0, `rgba(237,255,196,${a.toFixed(3)})`);
g.addColorStop(0.4, `rgba(197,249,85,${(a * 0.35).toFixed(3)})`);
g.addColorStop(1, 'rgba(197,249,85,0)');
ctx.fillStyle = g;
ctx.beginPath();
ctx.arc(x, y, m.r * 3, 0, Math.PI * 2);
ctx.fill();
ctx.fillStyle = `rgba(245,255,225,${Math.min(1, a * 1.15).toFixed(3)})`;
ctx.beginPath();
ctx.arc(x, y, m.r, 0, Math.PI * 2);
ctx.fill();
}
}
let raf = 0;
const start = performance.now();
function frame(now) {
draw((now - start) / 1000);
raf = requestAnimationFrame(frame);
}
function init() {
cancelAnimationFrame(raf);
build();
if (reduced) draw(0); // one static field, no animation
else raf = requestAnimationFrame(frame);
}
addEventListener('resize', init);
init();
})();
</script>
</body>
</html>
Source & credit
Effect seen on https://www.meshy.ai/ — credit to Meshy AI.
This is an independent recreation of the effect built from scratch for educational use. No proprietary source code was copied.
<!doctype html>
<!--
Meshy — "3D, On Command" hero/CTA section background
─────────────────────────────────────────────────────────────────────────────
Rebuild of the background behind Meshy's "3D, On Command" call-to-action band
at the bottom of https://www.meshy.ai/. The composition is CSS/SVG plus one
canvas particle layer:
• a 40px SVG <pattern> grid, skewed skew-y(-18deg), drawn in white/5 with
mix-blend-overlay, fading out top→bottom via a linear-gradient mask;
• 11 hand-placed "lit" grid cells (white/5) at fixed [col,row] coordinates;
• a lime gradient wash from #e1f9a7/30 → #c5f955/30 masked by a
radial-gradient(farthest-side at top) so it blooms from the top center;
• a big blurred white blob (blur 26px) as a soft volumetric light core;
• a full-bleed <canvas> of drifting, twinkling dust motes;
• the whole group sits at low opacity over a near-black background.
The canvas layer was measured off the live site: a 1216x447 <canvas
data-generated="true" aria-hidden="true"> inside an `opacity-0` wrapper that
fades in when the band scrolls into view. Sampling it shows ~1.6k lit pixels,
a longest horizontal run of only 4-6px (so: small round motes, not panels),
spread across 180 of 240 coarse buckets, with ~64% of buckets changing every
600ms — constant drift plus per-mote twinkle. Mote colour reads as a pale
lime-white (~rgb(237,255,196)) at up to ~0.75 alpha.
On the live site the 11 lit grid cells are static (computed opacity and fill
never change, no CSS animation bound). The gentle panel flicker below is a
deliberate addition, not a reproduction — drop the `.grid .lit` animation if
you want to match the original exactly.
The CTA button matches the real one: a flowing lime gradient (cta-flow, 5s)
and a conic-gradient border ring that spins (7s). Everything below is
self-contained — no CDN, no fonts, no images. Static values extracted from
the Meshy build chunk 11wz9_xx-0j_m.js and stylesheet 14ac6qycc6c_g.css.
-->
<html lang="en">
<head>
<link rel="icon" href="data:,">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Meshy — 3D, On Command</title>
<!-- a14y:begin head — machine-readable metadata; safe to delete when copying -->
<meta name="description" content="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.">
<link rel="canonical" href="https://fx.statico.io/effects/meshy-grid.html">
<link rel="alternate" type="text/markdown" href="https://fx.statico.io/effects/meshy-grid.md" title="On-Command Grid Bloom (Markdown)">
<meta property="og:type" content="website">
<meta property="og:site_name" content="cool web fx">
<meta property="og:title" content="On-Command Grid Bloom">
<meta property="og:description" content="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.">
<meta property="og:url" content="https://fx.statico.io/effects/meshy-grid.html">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="On-Command Grid Bloom">
<meta name="twitter:description" content="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.">
<script type="application/ld+json">{"@context":"https://schema.org","@graph":[{"@type":"SoftwareSourceCode","@id":"https://fx.statico.io/effects/meshy-grid.html#effect","name":"On-Command Grid Bloom","url":"https://fx.statico.io/effects/meshy-grid.html","abstract":"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.","description":"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.","programmingLanguage":"HTML","codeSampleType":"full solution","runtimePlatform":"Web browser","codeRepository":"https://github.com/statico/cool-web-fx","license":"https://unlicense.org/","isBasedOn":"https://www.meshy.ai/","mainEntityOfPage":"https://fx.statico.io/demos/meshy-grid","dateModified":"2026-07-27T18:42:10-07:00","inLanguage":"en"},{"@type":"BreadcrumbList","@id":"https://fx.statico.io/effects/meshy-grid.html#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://fx.statico.io/"},{"@type":"ListItem","position":2,"name":"On-Command Grid Bloom","item":"https://fx.statico.io/demos/meshy-grid"},{"@type":"ListItem","position":3,"name":"Standalone source","item":"https://fx.statico.io/effects/meshy-grid.html"}]}]}</script>
<style>.a14y-doc{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}</style>
<!-- a14y:end head -->
<style>
/* @property lets the conic border angle animate (real site uses this) */
@property --cta-border-angle { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
:root {
--bg: #0e0e0e; /* --color-bg-strong */
--bg2: #181818; /* --color-bg-base */
--accent: #c5f955; /* --color-accent-base */
--accent-light: #e1f9a7;
}
html, body {
width: 100%;
height: 100%;
overflow: hidden;
background: var(--bg);
font-family: "Inter Tight", Inter, -apple-system, BlinkMacSystemFont,
"Segoe UI", Roboto, system-ui, sans-serif;
}
/* ── Full-bleed section ─────────────────────────────────────────────── */
.section {
position: relative;
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 60px;
/* faint top-down lift toward the bloom, like the section gradient */
background:
radial-gradient(120% 80% at 50% -10%, #15170f 0%, var(--bg) 45%),
var(--bg);
overflow: hidden;
}
/* ── Background light group ─────────────────────────────────────────────
Real site renders this group at opacity 0.15. It is lifted here so the
grid + bloom actually read in the gallery thumbnail; colours, geometry,
masks and relative layer opacities are kept exactly as captured. ────── */
.bg {
position: absolute;
inset: 0;
z-index: 0;
opacity: 0.5;
pointer-events: none;
/* outer radial mask: radial-gradient(800px 400px at top, white 20%, transparent) */
-webkit-mask-image: radial-gradient(800px 400px at top, #fff 20%, transparent);
mask-image: radial-gradient(800px 400px at top, #fff 20%, transparent);
}
/* The skewed "beam" that holds the grid + lime wash.
Real: top-0 left-1/2 -ml-152 h-100 w-325 → width 1300px, height 400px. */
.beam {
position: absolute;
top: 0;
left: 50%;
width: 1300px;
height: 400px;
transform: translateX(-50%);
/* fade the whole beam top→bottom */
-webkit-mask-image: linear-gradient(#fff, transparent);
mask-image: linear-gradient(#fff, transparent);
}
/* Lime gradient wash, masked to bloom from the top-centre. */
.wash {
position: absolute;
inset: 0;
background: linear-gradient(to right,
rgba(225, 249, 167, 0.30), /* #e1f9a7 / 30 */
rgba(197, 249, 85, 0.30)); /* #c5f955 / 30 */
-webkit-mask-image: radial-gradient(farthest-side at top, #fff, transparent);
mask-image: radial-gradient(farthest-side at top, #fff, transparent);
}
/* The grid SVG: -inset-y-1/2 h-[200%], skewed -18deg, mix-blend overlay. */
.grid {
position: absolute;
left: 0;
right: 0;
top: -50%;
width: 100%;
height: 200%;
transform: skewY(-18deg);
fill: rgba(255, 255, 255, 0.05); /* fill-white/5 → lit cells */
stroke: rgba(255, 255, 255, 0.05); /* stroke-white/5 → grid lines */
mix-blend-mode: overlay;
overflow: visible;
}
/* ── Dust motes ─────────────────────────────────────────────────────────
Its own layer, NOT inside .bg — on the real site the canvas sits in a
sibling `absolute inset-0 size-full` wrapper, so it escapes the beam mask
and the 0.5 group opacity and covers the whole band. */
.motes {
position: absolute;
inset: 0;
z-index: 0;
width: 100%;
height: 100%;
pointer-events: none;
/* keep motes densest under the bloom, thinning toward the bottom */
-webkit-mask-image: linear-gradient(#fff 30%, rgba(255,255,255,0.45) 65%, transparent);
mask-image: linear-gradient(#fff 30%, rgba(255,255,255,0.45) 65%, transparent);
}
/* Lit grid cells. The slow brightness flicker is an addition — see the
note at the top of this file; the real site's cells are static. */
.grid .lit rect {
animation: cell-flicker 7s ease-in-out infinite;
}
@keyframes cell-flicker {
0%, 100% { opacity: 0.55; }
40% { opacity: 1; }
62% { opacity: 0.7; }
}
/* Soft white volumetric light core (real: blurred path, blur 26px). */
.lightblob {
position: absolute;
top: -40px;
left: 50%;
width: 1113px;
transform: translateX(-50%);
fill: #fff;
filter: blur(26px);
opacity: 0.5;
}
/* ── Heading ────────────────────────────────────────────────────────── */
.heading {
position: relative;
z-index: 1;
color: #fff; /* --color-label-title */
font-weight: 700;
font-size: clamp(2.4rem, 9vw, 7rem);
line-height: 1.2;
letter-spacing: -0.01em;
text-align: center;
filter: drop-shadow(0 6px 18px rgba(0, 0, 0, 0.5)); /* drop-shadow-lg */
}
.heading .accent { color: var(--accent); }
/* ── CTA button (flowing lime gradient + spinning conic ring) ───────── */
.cta {
position: relative;
z-index: 1;
display: inline-flex;
align-items: center;
gap: 10px;
height: 50px;
padding: 0 25px 0 30px;
border: 0;
border-radius: 9999px;
cursor: pointer;
user-select: none;
font: 700 18px/1.1 inherit;
letter-spacing: -0.02em;
color: #000; /* --color-accent-label */
/* real: linear-gradient(155.056deg,#AAFFCA 0%,#BAFF4A 50%,#AAFFCA 100%) */
background: linear-gradient(155.056deg, #AAFFCA 0%, #BAFF4A 50%, #AAFFCA 100%);
background-size: 200% 200%;
animation: cta-flow 5s ease-in-out infinite;
transition: box-shadow 0.3s ease-out;
}
.cta:hover {
background: linear-gradient(155.056deg, #BAFF4A 0%, #AAFFCA 50%, #BAFF4A 100%);
box-shadow: 0 0 30px rgba(170, 255, 202, 0.35);
}
/* Conic-gradient border ring, masked to just the 2px rim, spins 7s. */
.cta .ring {
pointer-events: none;
position: absolute;
inset: 0;
border-radius: 9999px;
padding: 2px;
background: conic-gradient(from var(--cta-border-angle),
#fff0 0deg, #fffffff2 45deg, #fff0 95deg, #fff0 360deg);
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
animation: cta-border-spin 7s linear infinite;
}
/* Looping arrow */
.cta .arrowbox { position: relative; display: inline-flex; width: 20px; height: 20px; overflow: hidden; }
.cta .arrows {
display: inline-flex; width: 40px; flex-shrink: 0; transform: translateX(-20px);
}
.cta:hover .arrows { animation: cta-arrow-loop 1.5s linear infinite; }
.cta .arrows svg { width: 20px; height: 20px; flex-shrink: 0; }
@keyframes cta-flow {
0%, 100% { background-position: 0 0; }
50% { background-position: 100% 100%; }
}
@keyframes cta-border-spin { to { --cta-border-angle: 360deg; } }
@keyframes cta-arrow-loop { to { transform: translateX(0); } }
@media (prefers-reduced-motion: reduce) {
.cta, .cta .ring, .grid .lit rect { animation: none; }
}
</style>
</head>
<body>
<!-- a14y:begin body — visually hidden description; safe to delete when copying -->
<div class="a14y-doc">
<h1>On-Command Grid Bloom</h1>
<p>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.</p>
<h2>How it works</h2>
<p>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.</p>
<p>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]].</p>
<p>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.</p>
<p>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.</p>
<p>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.</p>
<p>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.</p>
<h2>How to use this file</h2>
<p>This is a complete, self-contained HTML document — copy it verbatim rather than reconstructing it. Markdown version: <a href="https://fx.statico.io/effects/meshy-grid.md">https://fx.statico.io/effects/meshy-grid.md</a>. Full writeup and live preview: <a href="https://fx.statico.io/demos/meshy-grid">https://fx.statico.io/demos/meshy-grid</a>.</p>
<h2>Source and credit</h2>
<p>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.</p>
<h2>More</h2>
<p>Terms used above are defined in the <a href="https://fx.statico.io/glossary">glossary</a>. See also the <a href="https://fx.statico.io/sitemap.md">site map</a>, <a href="https://fx.statico.io/AGENTS.md">AGENTS.md</a> and <a href="https://fx.statico.io/llms.txt">llms.txt</a>.</p>
</div>
<!-- a14y:end body -->
<section class="section">
<!-- ── Dust motes (own layer, above the light group) ────────────────── -->
<canvas class="motes" aria-hidden="true"></canvas>
<!-- ── Background light group (grid + lime bloom + light core) ──────── -->
<div class="bg">
<!-- soft white volumetric core behind the heading -->
<svg class="lightblob" viewBox="0 0 1113 440" aria-hidden="true">
<path d="M.016 439.5s-9.5-300 434-300S882.516 20 882.516 20V0h230.004v439.5H.016Z"></path>
</svg>
<!-- skewed beam: lime wash + the grid pattern -->
<div class="beam">
<div class="wash"></div>
<svg class="grid" aria-hidden="true">
<defs>
<!-- 40×40 grid cell; the L-shaped path draws left + top edges -->
<pattern id="meshyGrid" width="40" height="40" patternUnits="userSpaceOnUse" x="-12" y="4">
<path d="M.5 40V.5H40" fill="none"></path>
</pattern>
</defs>
<rect width="100%" height="100%" stroke-width="0" fill="url(#meshyGrid)"></rect>
<!-- 11 lit cells, offset (-12,4) to match the pattern origin.
Staggered negative delays so they flicker out of phase. -->
<svg x="-12" y="4" class="overflow-visible lit">
<rect stroke-width="0" width="41" height="41" x="560" y="160" style="animation-delay:-0.0s"></rect>
<rect stroke-width="0" width="41" height="41" x="480" y="200" style="animation-delay:-2.6s"></rect>
<rect stroke-width="0" width="41" height="41" x="640" y="240" style="animation-delay:-5.1s"></rect>
<rect stroke-width="0" width="41" height="41" x="800" y="320" style="animation-delay:-1.3s"></rect>
<rect stroke-width="0" width="41" height="41" x="880" y="360" style="animation-delay:-3.9s"></rect>
<rect stroke-width="0" width="41" height="41" x="960" y="280" style="animation-delay:-6.2s"></rect>
<rect stroke-width="0" width="41" height="41" x="120" y="120" style="animation-delay:-0.8s"></rect>
<rect stroke-width="0" width="41" height="41" x="80" y="40" style="animation-delay:-4.4s"></rect>
<rect stroke-width="0" width="41" height="41" x="280" y="120" style="animation-delay:-2.0s"></rect>
<rect stroke-width="0" width="41" height="41" x="400" y="240" style="animation-delay:-5.7s"></rect>
<rect stroke-width="0" width="41" height="41" x="480" y="80" style="animation-delay:-3.2s"></rect>
</svg>
</svg>
</div>
</div>
<!-- ── Foreground content ───────────────────────────────────────────── -->
<h2 class="heading">3D, <span class="accent">On Command</span></h2>
<button class="cta" type="button">
<span class="ring" aria-hidden="true"></span>
Start Creating
<span class="arrowbox" aria-hidden="true">
<span class="arrows">
<svg viewBox="0 0 24 24" fill="none" stroke="#000" stroke-width="2.4"
stroke-linecap="round" stroke-linejoin="round">
<path d="M5 12h13M13 6l6 6-6 6"></path>
</svg>
<svg viewBox="0 0 24 24" fill="none" stroke="#000" stroke-width="2.4"
stroke-linecap="round" stroke-linejoin="round">
<path d="M5 12h13M13 6l6 6-6 6"></path>
</svg>
</span>
</span>
</button>
</section>
<script>
// ── Dust motes ────────────────────────────────────────────────────────
// Small pale-lime particles that drift up and sway, each twinkling on its
// own sine. Density, size and colour are taken from the measurements in the
// header comment: ~4-6px motes, pale lime-white, up to ~0.75 alpha, spread
// across the whole band and densest under the bloom.
(function () {
const canvas = document.querySelector('.motes');
const ctx = canvas.getContext('2d');
const reduced = matchMedia('(prefers-reduced-motion: reduce)').matches;
// Mote count scales with area so the density matches at any viewport.
// Tuned against the live canvas: ~0.3% lit-pixel coverage. Slightly
// brighter than the original so the field still reads in a thumbnail.
const DENSITY = 150 / (1216 * 447);
let motes = [];
let w = 0, h = 0, dpr = 1;
// Deterministic PRNG so the layout is stable across reloads/screenshots.
let seed = 0x9e3779b9;
const rnd = () => (((seed = (seed * 1664525 + 1013904223) >>> 0) / 4294967296));
function build() {
const rect = canvas.getBoundingClientRect();
dpr = Math.min(window.devicePixelRatio || 1, 2);
w = Math.max(1, rect.width);
h = Math.max(1, rect.height);
canvas.width = Math.round(w * dpr);
canvas.height = Math.round(h * dpr);
ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
seed = 0x9e3779b9;
const count = Math.round(w * h * DENSITY);
motes = Array.from({ length: count }, () => ({
x: rnd() * w,
y: rnd() * h,
r: 0.5 + rnd() * 1.1, // 1-3.2px across, plus glow
drift: 3 + rnd() * 9, // px/sec upward
sway: 6 + rnd() * 14, // px of horizontal travel
swaySpeed: 0.15 + rnd() * 0.35,
phase: rnd() * Math.PI * 2,
twinkle: 0.5 + rnd() * 1.1, // twinkle cycles/sec
base: 0.18 + rnd() * 0.38, // baseline alpha
}));
}
function draw(t) {
ctx.clearRect(0, 0, w, h);
for (const m of motes) {
// upward drift, wrapping at the top
const y = ((m.y - m.drift * t) % h + h) % h;
const x = m.x + Math.sin(t * m.swaySpeed + m.phase) * m.sway;
// per-mote twinkle, never fully dark
const a = m.base * (0.55 + 0.45 * Math.sin(t * m.twinkle * Math.PI * 2 + m.phase));
// soft glow: a wide faint disc under a small bright core
const g = ctx.createRadialGradient(x, y, 0, x, y, m.r * 3);
g.addColorStop(0, `rgba(237,255,196,${a.toFixed(3)})`);
g.addColorStop(0.4, `rgba(197,249,85,${(a * 0.35).toFixed(3)})`);
g.addColorStop(1, 'rgba(197,249,85,0)');
ctx.fillStyle = g;
ctx.beginPath();
ctx.arc(x, y, m.r * 3, 0, Math.PI * 2);
ctx.fill();
ctx.fillStyle = `rgba(245,255,225,${Math.min(1, a * 1.15).toFixed(3)})`;
ctx.beginPath();
ctx.arc(x, y, m.r, 0, Math.PI * 2);
ctx.fill();
}
}
let raf = 0;
const start = performance.now();
function frame(now) {
draw((now - start) / 1000);
raf = requestAnimationFrame(frame);
}
function init() {
cancelAnimationFrame(raf);
build();
if (reduced) draw(0); // one static field, no animation
else raf = requestAnimationFrame(frame);
}
addEventListener('resize', init);
init();
})();
</script>
</body>
</html>