Skip to content

Shadow Scroll Blossom

Particle trails that react to scrolling, mouse movement, and touch gestures with customizable palettes.

Signal

Project Signal

  • Status: Experiment, tuned for mobile + desktop
  • Focus: Responsive particle art with theme switching
  • Stack: React, Canvas API, Framer Motion, Tailwind
  • Ideal For: Designers and devs prototyping interactive hero sections

Onboarding Checklist

  1. Install dependencies (pnpm install) and start the dev server with pnpm dev.
  2. Open the controls drawer to tweak particle size, velocity, and palette presets in real time.
  3. Export presets or copy JSON snippets to reuse effects in other marketing experiences.

Highlights

  • Pointer + scroll reactive particle system keeps animations buttery even on phones.
  • Theme presets (Neon Bloom, Midnight Bloom, Solar Drift, etc.) map to CSS variables for easy reuse.
  • Built-in telemetry overlay displays fps, particle counts, and CPU cost for tuning.

Core Scenarios

  • Marketing hero experiments: Prototype interactive landings without writing shader code.
  • Experience libraries: Copy/paste presets into other projects or design systems.
  • Gesture research: Validate scroll and touch interactions before shipping to production sites.

Documentation Map

  • Quick Start

    Scripts, environment variables, and dev server instructions.

    Open Guide

  • Visual System

    Particle parameters, presets, and customization hooks.

    Explore Details

  • Export Recipes

    How to embed effects in other sites or components.

    Read Details