---
title: "Coding the stars - an interactive constellation with Three.js and React Three Fiber"
description: "The article provides a tutorial for recreating Supabase Launch Week 8’s animated constellation in Next.js with Three.js and React Three Fiber (R3F). Each signup or user-generated ticket becomes a particle shaped into an “8,” with signups loaded from the `lw8_tickets` table and later updates delivered through Supabase Realtime. The scene uses five-sided circle geometry, a white standard material with optional AdditiveBlending, an R3F Canvas, and a camera positioned at `[0, 0, 500]`. Particle movement is calculated with `useFrame`, elapsed time, sine and cosine functions, alternating loop direction, randomized speed and delay, and configurable offsets; a `dat.gui` debug mode exposes parameters such as particle count and shape dimensions."
---

# Coding the stars - an interactive constellation with Three.js and React Three Fiber

[Supabase](https://yomu.fyi/company/supabase) · fsansalvadore · Aug 4, 2023

**Type:** Tutorial

## Summary

The article provides a tutorial for recreating Supabase Launch Week 8’s animated constellation in Next.js with Three.js and React Three Fiber (R3F). Each signup or user-generated ticket becomes a particle shaped into an “8,” with signups loaded from the \`lw8\_tickets\` table and later updates delivered through Supabase Realtime. The scene uses five-sided circle geometry, a white standard material with optional AdditiveBlending, an R3F Canvas, and a camera positioned at \`\[0, 0, 500\]\`. Particle movement is calculated with \`useFrame\`, elapsed time, sine and cosine functions, alternating loop direction, randomized speed and delay, and configurable offsets; a \`dat.gui\` debug mode exposes parameters such as particle count and shape dimensions.

## Context

For Launch Week 8, Supabase wanted user-generated tickets to be central to the theme, so each signup was represented as a star in an animated night sky shaped like an “8.” The article also notes that SVG and 2D animation approaches would have made later randomization and shape changes more difficult.

## Approach / What changed

The implementation uses React Three Fiber to abstract Three.js scene complexity. It loads records from the \`lw8\_tickets\` table, renders particles in a Canvas, animates them with \`useFrame\` and trigonometric calculations, randomizes motion and placement, and supports live updates through Supabase Realtime. An optional hash-controlled \`dat.gui\` debug mode updates particle and shape configuration through React state.

## Takeaways

- Five-sided circle geometry minimizes particle complexity, while Three.js AdditiveBlending makes overlapping white particles appear brighter.
- Alternating the sign and vertical calculation for cosine-based motion changes a circular path into a repeating “8” shape.
- The optional \`#debug\` mode dynamically imports \`dat.gui\` inside an effect to avoid the \`window is not defined\` error in Next.js.

**Tags:** [Open Source](https://yomu.fyi/topic/open-source), [Performance](https://yomu.fyi/topic/performance)

- Source: [Supabase](https://supabase.com/blog/interactive-constellation-threejs-react-three-fiber)
- Source URL: https://supabase.com/blog/interactive-constellation-threejs-react-three-fiber
- Ingested by Yomu: 2026-08-29T01:19:06.264Z

[Read original post](https://supabase.com/blog/interactive-constellation-threejs-react-three-fiber)