1
Put a star viewer on a page
Use this if you want an interactive sky on a static site, CMS page, article, or portfolio.
Live coding path
Build with SkyKit
Start with the use-case you have: paste a viewer into a page, customize a sky scene, use star data in your own renderer, or build toward a small app.
Choose your use-case
Start with what you want to build.
2
Customize the sky scene
Use this if you want buttons, markers, custom objects, overlays, or animations.
3
Use the star data yourself
Use this if you want lists, labels, maps, Canvas, PixiJS, Phaser, or another renderer.
4
Build toward a small app
Use this if you want to own projection, interaction, movement, and labels.
Lesson 1
Set up a SkyKit browser
- What you build
- A pasteable star viewer with startup direction, movement speed, and constellation options.
- What you learn
- Viewer element, optional status element, script tag, and display attributes.
- Time estimate
- 5-10 min
Lesson 2
Look and fly with SkyKit
- What you build
- A pasted viewer that looks toward Orion, then flies through nearby 3D space.
- What you learn
- Skykit.whenReady(), the browser handle, look transitions, and observer movement.
- Time estimate
- 10-15 min
Lesson 3
Automate chapters
- What you build
- Button-driven chapters from the Sun to the Pleiades and Orion Nebula with orbital inserts.
- What you learn
- Chapter functions, targets, orbit semantics, and button wiring.
- Time estimate
- 15-25 min
Lesson 4
Use SkyKit in a local app
- What you build
- A Vite-style SkyKit browser with an app-owned Hyades marker and checkbox toggle.
- What you learn
- npm imports, createSkykitBrowser(), the same browser handle, and app-owned Three.js objects.
- Time estimate
- 15-25 min
Lesson 5
Query stars without Three.js
- What you build
- A live notebook that streams semantic star cells and turns them into table rows.
- What you learn
- Provider creation, cell deltas, requested attributes, local sorting and filtering.
- Time estimate
- 20–35 min
Lesson 6
Fetch names and labels with sidecars
- What you build
- A notebook that enriches streamed star refs with sidecar metadata labels.
- What you learn
- Dataset bootstrap, derived sidecar URLs, StarObjectRef lookup, and label fallback policy.
- Time estimate
- 20–35 min
Lesson 7
Build a small app
- What you build
- A small 2D star-slice demo that points toward Star Pilot.
- What you learn
- App shape, loading strategy, projection, renderer ownership, interaction, and labels.
- Time estimate
- 30–60 min
Where this fits
Start with a working result.
The first four lessons keep you in the star viewer path. Later lessons deliberately peel that away so you can use the data stream for tables, games, maps, and custom renderers.