Components Ambient Surfaces TopologyColorGrid

TopologyColorGrid

Three.js and GSAP colour topology scene with hover extrusion.

Live demo

Chromatic Substrate Topology

Spatial Z-Index Mapping

Brand palette · flattened

extruded={false} drops the per-card Z depth, suiting dense layouts.

Brand Spectrum

Marketing palette

Monochrome · locked dark

theme="dark" with the inline toggle hidden.

Neutral Ramp

Layered foundations

Decorative · non-interactive

interactive={false} turns this into a still piece — no hover, no click target.

Composition Study

Layered Spatial Mapping

Implementation

<script>
  import TopologyColorGrid, {
    type TopologySwatch
  } from '$lib/components/TopologyColorGrid.svelte';

  const swatches: TopologySwatch[] = [
    { id: 'ink', name: 'Ink Mesh', hex: '#0f172a', label: 'Node A1' },
    { id: 'flame', name: 'Flame Route', hex: '#ea580c', label: 'Core 01' }
  ];
</script>

<TopologyColorGrid {swatches} />

TopologyColorGrid mounts a Three.js wireframe plane on a client-side canvas and uses GSAP to choreograph a staggered card reveal. The Three.js renderer, geometry, material, and the GSAP context are all torn down in onMount’s cleanup return, so unmount disposes the WebGL resources cleanly. The component owns the canvas; do not duplicate the renderer in a parent. WebGL is feature-detected before mount, so the cards still render if the GPU path is unavailable.

Logic explainer

title: TopologyColorGrid
category: Ambient Surfaces

TopologyColorGrid

Full-bleed 3D colour-system scene inspired by Aura's Interactive 3D Topology Color Grid:
https://www.aura.build/component/95909

The TFE version uses Svelte state, client-only Three.js wireframe rendering, GSAP entry
reveals, keyboard-focusable colour cards, a reduced-motion fallback, and explicit
light/dark themes.

<TopologyColorGrid
	title="Chromatic Substrate Topology"
	subtitle="Spatial Z-Index Mapping"
	extruded={true}
	theme="light"
/>

API

Prop	Type	Default	Description
`swatches`	`TopologySwatch[]`	built-in palette	Array of `{ id, name, hex, label }` swatches.
`title`	`string`	`'Chromatic Substrate Topology'`	Heading copy above the grid.
`subtitle`	`string`	`'Spatial Z-Index Mapping'`	Eyebrow line above the title.
`extruded`	`boolean`	`true`	Stack swatches in a z-plane (false flattens the layout).
`interactive`	`boolean`	`true`	Whether swatches respond to hover/focus.
`theme`	`'light' \| 'dark'`	`'light'`	Initial card theme.
`showThemeToggle`	`boolean`	`true`	Show the inline light/dark toggle.

Installation

cp src/lib/components/TopologyColorGrid.svelte ./src/lib/components/

Dependencies

three
gsap

For your agent

01Mount this client-side; the component owns its Three.js renderer and GSAP cleanup.

# Install TopologyColorGrid into my Svelte 5 project

Three.js and GSAP colour topology scene with hover extrusion.

## 1. Install dependencies
# No external dependencies

## 2. Save component source
Copy the file at https://github.com/Jktfe/tfeSvelteTemplates/blob/main/src/lib/components/TopologyColorGrid.svelte
to src/lib/components/TopologyColorGrid.svelte in your project.

## 3. (Optional) Save demo route
Copy https://github.com/Jktfe/tfeSvelteTemplates/blob/main/src/routes/topologycolorgrid/+page.svelte to src/routes/topologycolorgrid/+page.svelte.

## 5. Usage
```svelte
<script>
  import TopologyColorGrid, {
    type TopologySwatch
  } from '$lib/components/TopologyColorGrid.svelte';

  const swatches: TopologySwatch[] = [
    { id: 'ink', name: 'Ink Mesh', hex: '#0f172a', label: 'Node A1' },
    { id: 'flame', name: 'Flame Route', hex: '#ea580c', label: 'Core 01' }
  ];
</script>

<TopologyColorGrid {swatches} />
```

title: TopologyColorGridcategory: Ambient Surfaces

TopologyColorGrid

title: TopologyColorGrid
category: Ambient Surfaces