https://github.com/ba-calderonmorales/shadow-scroll-blossom
interactive mouse and touch canvas made with lovable, codex, and github actions/pages enabled.
https://github.com/ba-calderonmorales/shadow-scroll-blossom
actions codex github lovable pages
Last synced: 5 months ago
JSON representation
interactive mouse and touch canvas made with lovable, codex, and github actions/pages enabled.
- Host: GitHub
- URL: https://github.com/ba-calderonmorales/shadow-scroll-blossom
- Owner: BA-CalderonMorales
- Created: 2025-06-05T04:28:33.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2025-07-04T03:39:28.000Z (12 months ago)
- Last Synced: 2025-07-04T04:27:48.114Z (12 months ago)
- Topics: actions, codex, github, lovable, pages
- Language: TypeScript
- Homepage: https://ba-calderonmorales.github.io/shadow-scroll-blossom/
- Size: 412 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Shadow Scroll Blossom
This project is my personal playground for generative art. It renders colorful particle trails that react to your mouse or touch input and lets you switch between multiple background themes. The repository also serves as a template for anyone wanting to build a similar interactive canvas site.
Using This Repository as a Template
1. Fork or clone the repo.
2. Update the project name in `package.json` and adjust this README with your own description.
3. Modify the canvas logic in `src` to experiment with your own particle effects.
4. Push your changes to `main` to deploy automatically with GitHub Pages.
Getting Started
1. Run `npm install`.
2. Launch the dev server with `npm run dev` and open `http://localhost:8080`.
3. Build for production with `npm run build`.
Project Structure
```
src/
components/ React components for the canvas and UI
contexts/ global settings state
data/ static options for menus
hooks/ reusable hooks
pages/ route components
utils/ canvas and particle helpers
types/ TypeScript interfaces
```
Key Features
- Mouse and touch interaction on the canvas
- Multiple particle styles and background themes
- Includes a new **Ocean** theme with deep blue gradients
- Introduces a **Desert** theme with warm sand tones
- Adds a **Forest** theme with lush green hues
- Adds a **Sunset** theme with orange-to-purple hues
- Adds a **Midnight** theme with deep indigo blues
- Dark mode toggle with persistence
- Settings stored in localStorage
Editing the Code
Edit directly on [Lovable](https://lovable.dev/projects/37feecad-ffa4-4ddb-a957-b38a5b8fc776) or work locally using your favorite editor. Make sure Node.js is installed via [nvm](https://github.com/nvm-sh/nvm#installing-and-updating).
Technology Overview
This project uses Vite, React, TypeScript, Tailwind CSS and shadcn-ui.
Deployment
Pushes to `main` automatically deploy to **GitHub Pages** via GitHub Actions. Enable Pages in the repository settings with "GitHub Actions" as the source. Once enabled, your site will be live at [`https://ba-calderonmorales.github.io/shadow-scroll-blossom/`](https://ba-calderonmorales.github.io/shadow-scroll-blossom/).
GitHub Pages must be enabled for the pull request previews to work correctly.
Previewing Pull Requests
Every pull request triggers a workflow that builds the site and publishes a free GitHub Pages preview. A link to the preview is posted as a comment on the PR so you can test changes before merging.