ViteReactStarter

birthday-greet — Vite Starter Template

By illocean

A scroll-driven birthday website template built with React 19, Vite, TypeScript and Three.js, featuring five scenes — envelope, card, record, photo wall and letter — with placeholder content that you can replace with your own text, photos and music.

Open Source Site Download Source ZIP

Explore the design

Compare the page layouts and mobile experience. Open any screenshot for a closer look.

1 previews

Author preview

View sourceOpens in a new tab

Author-provided preview

Preview provided in the project README.

One original preview is available. Open the full image to inspect the design.

Screenshots show visual appearance; interactive behavior may differ.

Recorded 2026-10-09View source

What stands out

A quick read of the recorded project description.

Five scroll-driven scenes: envelope, card, record, photo wall, letter

React 19 + Vite + TypeScript + Three.js + Motion, statically packaged, with no backend and no runtime network requests

Text centralized in src/content.ts, with fields marked PLACEHOLDER for item-by-item replacement

Photo slots support images or looping .mp4 video, and music and the page title have fixed replacement locations

Includes scripts to generate placeholder media; index.html defaults to noindex, nofollow

Template Details

birthday-greet is a scroll-driven interactive birthday website template that presents five scenes in sequence: envelope, card, record, photo wall and letter. The project is built with React 19, Vite, TypeScript, Three.js and Motion, packaged as static output, with no backend dependency and no network requests at runtime.

The template ships with placeholder content written by the author and contains no personal information. Text content is centralized in src/content.ts, and every field that needs replacing is marked with a PLACEHOLDER tag; photos go in public/photos/photo-1 through photo-6, and placing an .mp4 file in a slot renders it as a looping video clip; music maps to public/audio/song.mp3 and public/audio/background.mp3; the page title is changed in the <title> tag of index.html. npm run assets and npm run song can regenerate the placeholder media.

index.html includes noindex, nofollow by default, so you must remove that line yourself if you want the page indexed by search engines. The project requires Node 24 or later, and npm run verify performs type checking, a build, and browser-side verification using the Chrome already installed on the system, without downloading an additional browser. Full documentation is in docs/README-full.md.

Text effects come from Magic UI (MIT, bundled), surface textures from ambientCG (CC0), and fonts are Great Vibes, Quicksand and The Girl Next Door (SIL OFL), all self-hosted. The code is MIT-licensed, but third-party assets such as demo images, fonts and icons must be checked separately against their own licenses.

ViteReactLauncher

Is it right for your project?

Use Cases

Building a personal birthday greeting page for a friend or partner
Using it as a practice project for scroll-narrative single-page interaction
Replacing the placeholder content and deploying it as a static site to share
Referencing its five-scene structure and Three.js usage for further development

Suitable For

Users familiar with React and TypeScript who want to swap in content quickly
Personal projects that need static hosting without introducing backend services
Developers who want to learn scroll-driven scene transitions and Three.js integration

Getting started & customization

Use these recorded setup notes alongside the repository instructions for your chosen version.

1
Requires Node 24 or later
2
After npm install, run npm run dev to start the local development server
3
npm run verify uses the system Chrome to run type checking, the build and browser verification, without downloading a browser
4
Replace the placeholder text in src/content.ts and add your own photos and music
5
If you want the page indexed by search engines, remove noindex, nofollow from index.html

Read repository instructions

License & source material

Usage conditions & limitations

Free to use · keep license notice

This entry covers the free version under the MIT license in the public repository; the free scope applies to that version's code and does not mean external services or third-party assets are free.

Must comply with when using

You may use, modify, commercially use and distribute this version's code for free.
When distributing copies or substantial portions of the code, retain the original author's copyright notice and the full MIT license notice.
The code is provided as is; warranties and limitations of liability are governed by the original license and applicable law.

Additional costs & items to verify

Demo images, fonts, icons and other third-party assets must be checked against their own licenses; the code's MIT license alone is not sufficient to judge them.
External services such as domains, hosting, databases, payments or AI may incur separate charges.
The runtime requires Node 24 or later; npm run verify relies on a Chrome browser already installed on the system and will not download one automatically.
index.html includes noindex, nofollow by default, so the page will not be indexed by search engines by default; if you want it searchable, you must remove that line yourself.

View Original Text Basis

Permission is hereby granted, free of charge
Original License Text

Requires Node 24+. `npm run verify` drives your **system Chrome** (no browser download step).
Original README

`index.html` ships with `noindex, nofollow` — remove that line if you want your page searchable.
Original README

https://github.com/illocean/birthday-greet/blob/main/LICENSE https://github.com/illocean/birthday-greet/blob/main/README.md

Compiled by DeepSeek based on repository license and README ·2026-10-09. Results only cover the materials read; dependencies, images, fonts, and subsequent term changes are subject to their respective original texts.

Project checks & description sources

Template Information

Source platforms: GitHub
Documentation and maintenance reference score: Partly documented · 73 / 100
Technologies: Vite · React
Website type: Starter

How this score is calculated

Our heuristic uses license records (up to 30), a demo link (12), a preview (10), stars (15), recorded maintenance (15), description completeness (8), feature records (5) and classification data (5). It is not a code, security or performance test, or a Google score. A link does not establish tested functionality.

What to verify for this project

Repository update recorded: 2026-10-09
Screenshot last checked: 2026-10-09

No demo link is recorded. Use the repository instructions to evaluate the project locally; the screenshot alone cannot establish interactive behavior.

The catalog identifies Vite as the primary stack. Check the actual dependency manifest and lockfile for versions and hosting requirements. These notes use recorded metadata, not a code audit or a deployment test.

Use a selection guide →

How this description was prepared

AI-assisted description based on catalog records and repository material. Repository authors are not automatically the reviewers of this description.

Review declaration: [email protected] · 2026-10-09

Inspect the recorded source material

SHA-256: c29cee1e16f03a62287a14a834d715134c75aa0afd16be944d68b602c3af3471

2026-10-09T08:59:40.635Z

Source file / repository

# birthday-greet

![The photo-wall scene](docs/preview.png)

A scroll-driven interactive birthday site in five scenes — envelope, card, record, photo wall,
letter. A static bundle: no backend, no runtime network calls. React 19 · Vite · TypeScript ·
Three.js · Motion.

It ships with authored placeholders. Replace the text in `src/content.ts` and drop in your own
photos and music — nothing personal is included.

## Quickstart

Requires Node 24+. `npm run verify` drives your **system Chrome** (no browser download step).

```bash
npm install
npm run dev       # http://localhost:5173
npm run verify    # typecheck + build + the full browser gate
```

## Personalize

| What | Where |
| --- | --- |
| Name, track title, letter, photo captions | `src/content.ts` — every field marked `PLACEHOLDER` |
| Photos | `public/photos/photo-1…6` — a `.mp4` in any slot renders as a looping clip |
| Music | `public/audio/song.mp3`, `public/audio/background.mp3` |
| Page title | `<title>` in `index.html` |

`npm run assets` and `npm run song` regenerate the placeholder media. `index.html` ships with
`noindex, nofollow` — remove that line if you want your page searchable.

Full documentation: [docs/README-full.md](docs/README-full.md).

## Credits

- Text effects — [Magic UI](https://magicui.design) (MIT), vendored
- Surface textures — [ambientCG](https://ambientcg.com) (CC0)
- Fonts — Great Vibes, Quicksand, The Girl Next Door (SIL OFL), self-hosted

## License

MIT — see [LICENSE](LICENSE).

Report a correction

Explore similar templates

Compare previews and descriptions within the same stack and category.

react-starter-kit

A full-stack SaaS monorepo starter built on Vite and React, with Bun, TypeScript, tRPC, Drizzle ORM, Better Auth, Stripe, and Cloudflare Workers. It includes email OTP, passkey, Google OAuth, organizations, subscription billing, Drizzle migrations, seed scripts, and Terraform infrastructure.

Vite · SaaS

cove

Cove is a minimal TanStack Start starter template maintained by mugnavo, integrating React, TanStack Router/Query, Tailwind CSS, shadcn/ui, Drizzle ORM with PostgreSQL, Better Auth, Vite Plus, and Nitro.

Vite · SaaS

vite-react-boilerplate

A production-ready Vite + React starter template with TypeScript, Tailwind CSS, TanStack Router/Query/Table, Storybook, React Hook Form + Zod, Vitest and Playwright testing, plus Husky/Commitizen/Commitlint commit conventions.

Vite · Starter

react-vite-admin

A backend management starter built on Vite and React, integrating Recoil, React Query, TypeScript, and Axios, with Ant Design-style interface screenshots. Suitable as a starting point for management-side projects, licensed under MIT, with Chinese documentation and common scripts.

Vite · Admin dashboard

typescript-react_best_practices-vite_template

A Vite + React + TypeScript starter template by CodelyTV, preconfigured with Jest and React Testing Library unit tests, Cypress end-to-end tests, ESLint and Prettier using Codely's shared configuration, GitHub Actions workflows, a Makefile, and Sass.

Vite · Starter

cloudflare-starter-kit

A Cloudflare Workers project scaffolding template maintained by kriasoft, using Vite and TypeScript, with three built-in workspaces: api, app, and edge, and preconfigured local testing, multiple environments, and a GitHub Actions deployment workflow.

Vite · Starter