# Rising Cubes

Aperveil / Light, shaped for the web.

An isometric cube field with a rise, hold and fall rhythm. Tune Rising Cubes' wave timing and palette, then export the WebGPU effect for React.

[Aperveil integration guide](https://www.aperveil.com/docs)

## What it does

Rising Cubes animates a repeated isometric field through rise, hold and fall phases. Wave direction, spread and phase jitter organize the sequence; the pointer adds a local lift.

## Choose it for

Bring motion to an infrastructure product introduction. Let the cube sequence express progression while the headline and feature labels stay steady.

## Limits

These are shader-projected forms, not independent rigid bodies. The effect has no collision simulation or arbitrary 3D model input.

## Current look

Default. Color Looks change colors only; motion, geometry and typography remain unchanged.

[Open editor](https://www.aperveil.com/shaders/rising-cubes/edit?look=default)

## Install

Download the Export Kit from the editor. No shader-specific npm package or CLI is published yet.

```sh
npm install ./vendor/aperveil-runtime-0.1.0.tgz ./vendor/aperveil-react-0.1.0.tgz
```

Every control in the editor is a typed prop. Leave a prop out to keep the value you exported; change one and the running shader updates without restarting. Give the surface a size and pass fallback for browsers without WebGPU.

```tsx
"use client";

import RisingCubes from "./RisingCubes";

export default function Hero() {
  return (
    <RisingCubes
      className="hero-shader"
      columns={10} background="#0a0814ff"
      fallback={<div className="hero-shader-fallback" />}
    />
  );
}

// .hero-shader { width: 100%; height: 560px; }
```

Component props: `background`, `topFace`, `leftFace`, `rightFace`, `lightColor`, `columns`, `gap`, `riseHeight`, `hold`, `cycleSpeed`, `waveDirection`, `waveSpread`, `phaseJitter`, `pointerLift`, `pointerReach`, `opacity`, `className`, `style`, `paused`, `fallback`, `onReady`, `onError`.

Raw WGSL is included for a custom WebGPU host; it is not CSS. Keep semantic headings and links in HTML.

## Controls

- Background (`background`, color): Colour behind the blocks, darkened toward the edges.
- Top face (`topFace`, color): Colour of each block's top.
- Left face (`leftFace`, color): Colour of the left-facing sides.
- Right face (`rightFace`, color): Colour of the right-facing sides.
- Edge light (`lightColor`, color): Colour of the light on the edges and sides of raised blocks.
- Grid density (`columns`, slider): How many blocks run across the grid.
- Block spacing (`gap`, slider): Space between neighbouring blocks.
- Rise height (`riseHeight`, slider): How high the blocks rise in each cycle.
- Hold at peak (`hold`, slider): Fraction of each cycle spent suspended at full height.
- Cycle speed (`cycleSpeed`, slider): How fast the blocks rise and fall; 0 holds them still.
- Wave direction (`waveDirection`, slider): Direction the rising wave travels across the grid, in degrees.
- Wave spread (`waveSpread`, slider): How staggered the rise is along the wave; 0 lifts every block together.
- Phase irregularity (`phaseJitter`, slider): Random timing between neighbouring blocks, so the wave feels less mechanical.
- Pointer lift (`pointerLift`, slider): How high blocks rise under the pointer.
- Pointer reach (`pointerReach`, slider): How wide the area the pointer lifts is.
- Opacity (`opacity`, slider): Opacity of the complete effect, including its background.

## Compatibility

WebGPU rendering requires a supported browser and secure context. The landing shows a real poster for the selected Look when live rendering is unavailable. The standard exported component does not bundle a poster fallback. Supply your own fallback in the host layout. Text exports also retain readable HTML typography.

## Performance

6.034 ms legacy timing (method not recorded; not a pure GPU measurement). 1440x900 @ dpr 2; Metal driver on macOS Version 26.6.2 (Build 25G83); measured 2026-09-03. This is a recorded headless sample, not a browser FPS or mobile-performance guarantee.

## Questions

### Can I change how long the cubes hold at the top?

Yes. Hold at peak controls the elevated phase, while Cycle speed controls the overall rhythm. Wave direction and Phase irregularity change how that rhythm travels through the field.

### Can the animation stay separate from my interface?

Yes. The projected cubes live in one background canvas. Keep headings, links and product information in HTML above it; the cube field is decorative and does not move your layout.

### What should I not use Rising Cubes for?

These are shader-projected forms, not independent rigid bodies. The effect has no collision simulation or arbitrary 3D model input.

### What happens without WebGPU?

This landing shows a still poster of your selected Color Look. The raw WGSL needs a WebGPU host. Landing posters are not bundled in the Export Kit: add your own fallback around the exported component.

### Can I use this shader commercially?

Part of the Free collection for Aperveil 1.0. Public live preview and Color Looks are open. Free Export Kits do not require an account. Purchasing is not available yet. Follow the license notices supplied with the source you download. The planned Free collection permits personal and commercial interface projects. An alpha access grant is not a purchase or a replacement for those license terms.

## License

Part of the Free collection for Aperveil 1.0. Public live preview and Color Looks are open. Free Export Kits do not require an account. Purchasing is not available yet. Follow the license notices supplied with the source you download. The planned Free collection permits personal and commercial interface projects. An alpha access grant is not a purchase or a replacement for those license terms.

## Related shaders

- [Iso Grid](https://www.aperveil.com/shaders/iso-grid)
- [Flip Tiles](https://www.aperveil.com/shaders/flip-tiles)
- [Hex Tiles](https://www.aperveil.com/shaders/hex-tiles)