Added 2 Sept 2026

voxel-wave-15749

Voxel Wave

3D & Perspective

Voxel Wave

A three by three field of isometric cubes, each built from a lit top and four shaded walls, riding up and down on a diagonal wave that crosses the grid.

3D & Perspectiveisometricvoxelcubeswavegrid

lines of CSS: 61lines of CSS
dependencies: 0dependencies
browser, for years: Everybrowser, for years
stops under reduced motion: Guardedstops under reduced motion

Backdrop

Open a live copy in

Vue, Svelte, styled-components and Tailwind exports are part of Pro. HTML, CSS and React are free forever.

voxel-wave-15749.css

.fx-v14-3d-voxel-15748 {
  display: grid;
  place-items: center;
  width: 220px;
  height: 158px;
  perspective: 700px;
  background: radial-gradient(80% 80% at 50% 40%, #101b2e, #080d17 75%);
  border-radius: 0.7rem;
}
.fx-v14-3d-voxel-15748 .sc {
  position: relative;
  width: 86px;
  height: 86px;
  transform-style: preserve-3d;
  transform: rotateX(56deg) rotateZ(-45deg) translateZ(-8px);
}
.fx-v14-3d-voxel-15748 .sc i {
  position: absolute;
  width: 26px;
  height: 26px;
  transform-style: preserve-3d;
  animation: fx-v14-3d-voxel-15748-bob 3.4s ease-in-out infinite;
}
.fx-v14-3d-voxel-15748 .sc u {
  position: absolute;
  inset: 0;
  display: block;
}
.fx-v14-3d-voxel-15748 .t { transform: translateZ(26px); background: #38bdf8; box-shadow: inset 0 0 0 1px rgba(8,47,73,0.5); }
.fx-v14-3d-voxel-15748 .n { transform: translateY(-13px) translateZ(13px) rotateX(90deg); background: #0e7490; }
.fx-v14-3d-voxel-15748 .s { transform: translateY(13px)  translateZ(13px) rotateX(90deg); background: #0e7490; }
.fx-v14-3d-voxel-15748 .e { transform: translateX(13px)  translateZ(13px) rotateY(90deg); background: #155e75; }
.fx-v14-3d-voxel-15748 .w { transform: translateX(-13px) translateZ(13px) rotateY(90deg); background: #155e75; }
.fx-v14-3d-voxel-15748 .c1 { left: 0px;  top: 0px;  animation-delay: 0s; }
.fx-v14-3d-voxel-15748 .c2 { left: 30px; top: 0px;  animation-delay: 0.22s; }
.fx-v14-3d-voxel-15748 .c3 { left: 60px; top: 0px;  animation-delay: 0.44s; }
.fx-v14-3d-voxel-15748 .c4 { left: 0px;  top: 30px; animation-delay: 0.22s; }
.fx-v14-3d-voxel-15748 .c5 { left: 30px; top: 30px; animation-delay: 0.44s; }
.fx-v14-3d-voxel-15748 .c6 { left: 60px; top: 30px; animation-delay: 0.66s; }
.fx-v14-3d-voxel-15748 .c7 { left: 0px;  top: 60px; animation-delay: 0.44s; }
.fx-v14-3d-voxel-15748 .c8 { left: 30px; top: 60px; animation-delay: 0.66s; }
.fx-v14-3d-voxel-15748 .c9 { left: 60px; top: 60px; animation-delay: 0.88s; }
@keyframes fx-v14-3d-voxel-15748-bob {
  0%, 100% { transform: translateZ(0); }
  50%      { transform: translateZ(22px); }
}

@media (prefers-reduced-motion: reduce) {
  .fx-v14-3d-voxel-15748,
  .fx-v14-3d-voxel-15748::before,
  .fx-v14-3d-voxel-15748::after,
  .fx-v14-3d-voxel-15748 *,
  .fx-v14-3d-voxel-15748 *::before,
  .fx-v14-3d-voxel-15748 *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    animation-delay: 0ms !important;
    transition-duration: 1ms !important;
    transition-delay: 0ms !important;
  }
}

voxel-wave-15749.html

<div class="fx-v14-3d-voxel-15748">
  <div class="sc">
    <i class="c1">
      <u class="t"></u>
      <u class="n"></u>
      <u class="s"></u>
      <u class="e"></u>
      <u class="w"></u>
    </i>
    <i class="c2">
      <u class="t"></u>
      <u class="n"></u>
      <u class="s"></u>
      <u class="e"></u>
      <u class="w"></u>
    </i>
    <i class="c3">
      <u class="t"></u>
      <u class="n"></u>
      <u class="s"></u>
      <u class="e"></u>
      <u class="w"></u>
    </i>
    <i class="c4">
      <u class="t"></u>
      <u class="n"></u>
      <u class="s"></u>
      <u class="e"></u>
      <u class="w"></u>
    </i>
    <i class="c5">
      <u class="t"></u>
      <u class="n"></u>
      <u class="s"></u>
      <u class="e"></u>
      <u class="w"></u>
    </i>
    <i class="c6">
      <u class="t"></u>
      <u class="n"></u>
      <u class="s"></u>
      <u class="e"></u>
      <u class="w"></u>
    </i>
    <i class="c7">
      <u class="t"></u>
      <u class="n"></u>
      <u class="s"></u>
      <u class="e"></u>
      <u class="w"></u>
    </i>
    <i class="c8">
      <u class="t"></u>
      <u class="n"></u>
      <u class="s"></u>
      <u class="e"></u>
      <u class="w"></u>
    </i>
    <i class="c9">
      <u class="t"></u>
      <u class="n"></u>
      <u class="s"></u>
      <u class="e"></u>
      <u class="w"></u>
    </i>
  </div>
</div>

What do I do with this?

Put voxel-wave-15749.css anywhere your page already loads CSS from — in Next.js that is app/globals.css, or any stylesheet with a <link> in your HTML.
Then put the class on the element you want it on: <button class="fx-v14-3d-voxel-15748">. The CSS does nothing until a class name in it matches something on the page.

Link the stylesheet, then paste the markup wherever you need it.

npx hoverlab add voxel-wave-15749

What's included

The markup and the stylesheet, in whichever framework you pick
No runtime dependencies

Works with

React
Vue
Svelte
Tailwind
styled-components
Plain CSS

npx hoverlab add voxel-wave-15749

Or over MCP, from your editor's agent — no account needed.

License

Free to read, copy and install, for personal and non-commercial projects. Shipping it in client work or a paid product needs Pro ($79 once). The source lands in your repo and stops being ours — no attribution, nothing to upgrade.

Was this useful?

Motion safety

Static estimate, read from the CSS

Reduced motion: Guarded
Ships a prefers-reduced-motion block, so the loop settles into its end state for visitors who ask for less motion.
What it animates: Compositor only
Only transform, opacity or filter: the GPU can run it without re-laying-out or repainting the page.
Flashing (WCAG 2.3.1): No flashing found
No repeating change in opacity, colour or brightness large enough to count as a flash.
Layout shift (CLS): No shift expected
Nothing it animates moves or resizes the box in flow. A category from the CSS, not a measurement for this effect.

Every row is read from the shipped CSS. Only a figure marked measured came from a browser. Customizing the speed changes the timing, so recheck a customized copy. How it is computed

31 more effects in 3D & Perspective

All of them free to read, copy and install — no account, no locked tiles, no watermarked preview. The whole catalog is open, and so are the API and the CLI.

Browse 3D & Perspective

Shipping one commercially

Copying the code is free. Putting it in client work or a paid product is what Pro is for — the licence, not the access.

A commercial licence for everything in the catalog
Unlimited bundle exports, in Vue, Svelte and Tailwind
One payment — no subscription, nothing to renew

Pro — $79 once

What's included

Copy-ready HTML and CSS — 61 lines, no build step
7 export formats — HTML, CSS, React, Vue, Svelte, styled-components, Tailwind
Live customization for hue, saturation, scale and speed
Editable in the playground

npx hoverlab add voxel-wave-15749
writes it into your project
npx hoverlab dna voxel-wave-15749
hands it to your agent

Licence

Free to copy and use in personal and non-commercial projects, in as many as you like, with no attribution. Shipping it in client work or a paid product needs Pro ($79 once). Read the licence.

Works with

FrameworksPlain HTMLReactVueSvelteTailwindstyled-components

AgentsCLIMCPFigma

Where this fits

Full sections that use this kind of element.

Split Hero with Product PanelHeroes
Copy on the left, a drawn product panel on the right — the default hero for anything with an interface to show, with no image asset to host and no layout shift while it loads.
Bento Feature GridFeature Sections
Six tiles on an asymmetric 4x3 grid with per-tile spans, a hover glow and a mobile collapse that follows source order.
Centered Announcement HeroHeroes
A linked announcement pill over a large centered headline, dual CTAs and a wordmark strip — the hero for a product with nothing to screenshot yet.

Browse all blocks

Similar effects

3D & Perspective

Hyperspeed
Streaks accelerating out of a vanishing point, each hottest at its head. Done in polar coordinates, so 180 of them cost exactly what one does.
Blue 3D Push Button (MD)
Blue button with a solid extruded edge that compresses all the way down when pressed.
Tilt
Hover to rotate.
Ocean Tilt Card (MD)
Ocean card that tilts in 3D space on hover and throws its shadow to the side.
Front
Back
Ocean Flip Card
Card that flips 180° on hover to reveal its reverse ocean face.
Ocean Rotating Cube
Six-faced cube in ocean colors, rotating continuously with real CSS 3D transforms.
DEPTH
Blue Layered Depth Text
Stacked text-shadow layers give the headline a solid blue extrusion that deepens on hover.

Browse all 3d & perspective

7 variations of Voxel Wave

Finished looks, each one a position in the customizer above. Copy any of them, or open it and keep moving the sliders.

Ember
warm
by Hoverlab
Rotates the palette warm and pushes the intensity up.
Open
Nocturne
cool
by Hoverlab
A short cool rotation with the intensity pushed hard.
Open
Petite
proportion
by Hoverlab
The smallest this scales to and still reads.
Open
Newsprint
muted
by Hoverlab
The flattest this gets while still being a colour.
Open
Candy
signature
by Hoverlab
Rotated warm past yellow, vivid, compact and a little quick.
Open
Voltage
electric
by Hoverlab
A small rotation and a large amount of saturation.
Open
Slow Burn
tempo
by Hoverlab
Three times as long — ambience rather than feedback.
Open

Voxel Wave

What do I do with this?

What's included

Works with

License

Motion safety

31 more effects in 3D & Perspective

Shipping one commercially

7 variations of Voxel Wave

Ember

Nocturne

Petite

Newsprint

Candy

Voltage

Slow Burn