Skip to content
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.

Code Snapshot

```typescript import type { ParticlePreset } from '../types';

export const neonBloom: ParticlePreset = { name: 'Neon Bloom', particleCount: 200, size: { min: 2, max: 8 }, velocity: { x: 0.4, y: -1.2 }, colors: ['#ff6ec7', '#7b2ff7', '#00f0ff'], bloom: true, trailLength: 12, }; ```

```bash

Clone and start the dev server

git clone https://github.com/BA-CalderonMorales/shadow-scroll-blossom.git cd shadow-scroll-blossom pnpm install pnpm dev ```

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

Document Description
Quick Start Scripts, environment variables, and dev server instructions
Visual System Particle parameters, presets, and customization hooks
Export Recipes How to embed effects in other sites or components