A small collection of single-purpose emoji animations. Each site sends an emoji bouncing around the viewport and switches to another skin-tone variant whenever it hits an edge.
The monorepo consolidates the original standalone Hand Shake and Middle Finger experiments so they can share the animation, layout, styling, and tooling.
apps/hand-shake— cycles through the mixed-skin-tone handshake emoji combinationsapps/middle-finger— cycles through the middle-finger skin-tone variants
@repo/astro-shared— shared Astro layout and bouncing-emoji animation@repo/tailwind— shared Tailwind CSS theme@repo/typescript-config— shared TypeScript configuration@repo/ui— shared UI utilities
- Astro
- TypeScript
- Tailwind CSS
- Turborepo
- Bun workspaces
Use Node.js 22.12 or newer and Bun 1.3.14. Install the workspace dependencies:
bun installRun every app in development mode:
bun run devOr run one app at a time:
bunx turbo dev --filter=hand-shake
bunx turbo dev --filter=middle-fingerThe Middle Finger app uses port 4322; Astro assigns the default development
port to Hand Shake.
bun run build
bun run check-types
bun run knip
bun run testThe sites are deliberately tiny: the animation runs in the browser, respects viewport resizing, and does not require a backend or runtime configuration.