Skip to main content
CRI
Design System
Design System

Lattice Animation

A 3D lattice animation built with Three.js that creates an immersive visual experience. The animation features animated point lights that move through a 3D grid of cubes, creating dynamic lighting effects.

Preview

The lattice animation adapts to your design system colors and theme.

Features

  • Uses design system color tokens (primary, secondary, tertiary) for dynamic theming
  • Responsive canvas that adapts to container width
  • Performance optimized with instanced rendering
  • Auto-rotating camera with subtle motion
  • Animated point lights that create dynamic color shifts
  • Automatic cleanup on unmount

Usage

Import and use the LatticeAnimation component:

import LatticeAnimation from "@/components/lattice/LatticeAnimation";

export default function MyComponent() {
  return (
    <div className="w-full">
      <LatticeAnimation variant="outline" animationType="pulsing" />
    </div>
  );
}

Configuration

The animation automatically reads from CSS custom properties:

  • --primary - Primary color for cube material
  • --secondary - Secondary color for point lights
  • --tertiary - Tertiary color for point lights

The animation height is fixed at 480px, and the width adapts to the container. The component handles theme changes automatically and includes proper cleanup on unmount.

Variants

The LatticeAnimation component supports 5 different styling variants that modify visual appearance (colors, fill vs outline, lighting). All variants use the same animation parameters:

defaultDefault

Filled cubes with design system colors

outlineOutline

Wireframe edges only, no fill

neutralNeutral

Filled cubes with neutral gray colors

high-contrastHigh Contrast

Dark cubes with very bright lighting for maximum contrast

monochromeMonochrome

Single-hue color scheme with subtle variations

You can switch between variants using the buttons above the preview, or pass the variant prop to the component. All variants use the same animation parameters (cube count, size, speed); only the visual styling changes:

<LatticeAnimation variant="outline" />

Animation Types

The LatticeAnimation component supports 5 different animation behaviors that modify how the cubes move and transform:

defaultDefault

Static grid with animated lighting

pulsingPulsing

Cubes scale in and out in a wave pattern

rotatingRotating

Individual cubes rotate on their axes

waveWave

Cubes move in a wave pattern through the grid

dynamicDynamic

Starts small, explodes once, then grows very slowly

You can switch between animation types using the buttons above the preview, or pass the animationType prop to the component:

<LatticeAnimation animationType="pulsing" />
<LatticeAnimation animationType="rotating" />
<LatticeAnimation animationType="wave" />
<LatticeAnimation animationType="dynamic" />

Implementation Details

3D Grid Structure

The lattice consists of 12×12×12 cubes arranged in an alternating pattern, creating a visually interesting 3D grid structure. Cubes are rendered using Three.js instanced meshes for optimal performance.

Lighting System

The animation uses a combination of ambient light, directional light (following the camera), and four animated point lights that orbit around the lattice, creating dynamic color shifts based on the design system colors.

Camera Movement

The camera performs a subtle auto-rotation around the lattice, creating a sense of movement and depth without being distracting.