Svelte p5 Gallery

A template for showcasing animated p5.js sketches. Built with sveltekit.

Add your own sketches with the included template. Customize controls to add interactivity. Showcase your brand with configurable social links. Publish easily with the included infra files.

Features

• Mobile Friendly
• Light Mode / Dark Mode detection
• Sketches Pause & Resume automatically

Getting Started

1. Use this template on GitHub or clone the repo
2. Install dependencies:

   npm install

3. Start the dev server:

   npm run dev

Project Structure

src/lib/components/sketches/
├── SketchCard.svelte          # Reusable wrapper with automatic visibility tracking
├── types.ts                   # Shared TypeScript types
├── _template/                 # Template for creating new sketches
│   ├── template.svelte        # Component template
│   └── script.svelte.ts       # p5.js sketch logic template
├── mosaic-morph/              # Example sketch
│   ├── mosaic-morph.svelte
│   └── script.svelte.ts
└── your-new-sketch/           # Add new sketches here!
    ├── your-sketch.svelte
    └── script.svelte.ts

Creating a New Sketch

1. Copy the template folder:

   cp -r src/lib/components/sketches/_template src/lib/components/sketches/your-sketch-name

2. Rename the component file:

   mv src/lib/components/sketches/your-sketch-name/template.svelte \
      src/lib/components/sketches/your-sketch-name/your-sketch-name.svelte

3. Edit script.svelte.ts:

   • Add your sketch-specific configuration to SketchConfig
   • Implement your setup() and draw() functions
   • The pause/resume functionality is already built in!

4. Edit the .svelte component:

   • Update the title in <SketchCard title="your-sketch-name">
   • Add any controls your sketch needs in the {#snippet controls()} block
   • Pass configuration values to createSketch()
   • Add any sketch-specific props (e.g., initialSpeed, initialSize)

5. Add to the carousel in +page.svelte:

   <script>
       import MosaicMorph from "$lib/components/sketches/mosaic-morph/mosaic-morph.svelte";
       import YourSketch from "$lib/components/sketches/your-sketch-name/your-sketch-name.svelte";
   </script>
   
   <Carousel.Root>
     <Carousel.Content>
       <Carousel.Item>
         <MosaicMorph initialSize={0.4} initialSpeed={0.8} />
       </Carousel.Item>
       <Carousel.Item>
         <YourSketch />
       </Carousel.Item>
     </Carousel.Content>
   </Carousel.Root>

How Automatic Visibility Tracking Works

The carousel automatically tracks which sketch is visible—no manual index prop required!

1. Carousel.Item assigns each item a unique index via Svelte context
2. SketchCard retrieves this index and compares it to the carousel's selectedIndex
3. When selectedIndex === itemIndex, the sketch is marked as isActive
4. The sketch component uses a $effect to call pause() or resume() on the p5 controller
5. The p5 sketch uses noLoop() and loop() to pause/resume the draw loop

This ensures only the currently visible sketch is running its animation loop, saving CPU/GPU resources.

Personalization

Edit src/lib/components/socials.svelte to add your own branding and social links. The template includes ready-to-use icon snippets for Discord, LinkedIn, SoundCloud, and more.

Scripts

Command	Description
npm run dev	Start development server
npm run build	Build for production
npm run preview	Preview production build

Publish or Self Host

Want to share publically? Your gallery is ready to roll with the include docker-compose stack. See infra/README.md for detailed instructions.

License

MIT