Tiny Planet

$ pnpm dlx shadcn@latest add @remocn/tiny-planet

Usage

TinyPlanet draws a seeded two-row skyline with lit windows and spires on a flat horizon, then bends it into a circle like the tiny planet effect in 360° photography. The strip is exactly as long as the planet's circumference, so it closes without a seam. While it bends the planet shrinks to fit the frame and the sun drifts up and to the right. Once closed, the planet turns at a steady rate for as long as the sequence lasts.

import { TinyPlanet } from "@/components/remocn/tiny-planet";
 
export const Hometown = () => (
  <TinyPlanet buildings={32} seed={9} sunColor="#F5B83D" />
);

buildings is the front row count (minimum 4); the back row gets 80% of that. seed changes widths, heights, spires and windows. spin is the final turning rate in degrees per frame at 30 fps, and spin={0} leaves the planet still once it closes.

Timing

At 30 fps and speed={1}:

length covers the bend. Give the sequence a few extra seconds if you want the turning planet to hold behind a title. speed scales the whole timeline, including the spin rate.