vod frog, frog with the vods
1# vod frog
2
3vod frog, frog with the vods, i take the frogs on the vod. i vod on the frogs.
4
5svelte app, fair amount of claude code work was done here but i've looked through it and most of it seems reasonable. please submit pull requests for anything sus!
6
7## Running
8
9```bash
10npm install
11npm run dev
12```
13
14Build for production:
15
16```bash
17npm run build
18npm run preview
19```
20
21## Project structure
22
23```
24src/
25├── app.html # HTML shell with OpenGraph meta
26├── lib/
27│ ├── api.ts # AT Protocol & UFOs API client, video fetching, handle/profile resolution
28│ ├── theme.ts # Color scheme, seeded RNG, card offset/rotation generation
29│ ├── WavyBorder.svelte # Rectangular wavy border: SVG stroke + CSS clip-path polygon
30│ ├── WavyCircle.svelte # Circular wavy border for avatars
31│ ├── MeshBackground.svelte # Layered SVG radial gradient background
32│ ├── PlantOverlay.svelte # Fern leaves photo overlay with multiply blend
33│ ├── FrogHeader.svelte # "vod frog" header with frog illustration
34│ ├── VideoCard.svelte # Video thumbnail card with scrub preview and hopping frog
35│ └── VideoPlayer.svelte # Custom HLS video player with frog scrub bar and frogeye fullscreen
36├── routes/
37│ ├── +layout.svelte # Global layout: fonts, cursor, background, plants
38│ ├── +layout.ts # SPA mode config
39│ ├── +page.svelte # Main video listing with pagination
40│ └── profile/[handle]/
41│ ├── +page.svelte # Bluesky profile display
42│ └── +page.ts # Profile route config
43├── static/
44│ ├── fonts/ # Bundled PicNic and Fang webfonts
45│ ├── froggie.png # Header frog illustration
46│ ├── froggiestand.png # Frog scrub sprite (standing)
47│ ├── froggiejump.png # Frog scrub sprite (jumping)
48│ ├── frogeye.png # Fullscreen toggle button
49│ ├── frogcursor-small.png # Custom cursor
50│ ├── frogicon.png # Favicon
51│ ├── leaves.png # Fern overlay photo
52│ └── opengraph.png # OG image
53├── spec/ # Design reference (mockups, assets, design doc)
54└── tests/
55 ├── load-test.ts # API load time, title ordering, handle resolution tests
56 └── stream-test.ts # Stream diagnostics: codecs, bandwidth, availability
57```
58
59## Design
60
61Videos are fetched from across the AT Protocol network via the [UFOs API](https://ufos-api.microcosm.blue) (TODO: REPLACE THIS WITH A QUICKSLICE INSTANCE, UFOS DOES NOT ACTUALLY INDEX 100% OF THE DATA), which indexes all `place.stream.video` records. Playback uses HLS via [hls.js](https://github.com/video-dev/hls.js/).
62
63Each video card gets a unique wavy border generated from layered sine waves, seeded by the record's key. Cards are offset with random rotation (±5°) and position jitter (±30px) for an organic, hand-placed feel. The wavy borders use a CSS `clip-path: polygon()` for content masking and an SVG path for the visible stroke, both derived from the same control points.
64
65Fonts are PicNic (headers) and Fang (body), bundled as webfonts.
66
67## Tests
68
69```bash
70npx tsx tests/load-test.ts # API + content tests
71npx tsx tests/stream-test.ts # Stream codec/bandwidth diagnostics
72```
73
74Copyright 2026 Business Goose
75
76Licensed under the Apache License, Version 2.0 (the "License");
77you may not use this file except in compliance with the License.
78You may obtain a copy of the License at
79
80 http://www.apache.org/licenses/LICENSE-2.0
81
82Unless required by applicable law or agreed to in writing, software
83distributed under the License is distributed on an "AS IS" BASIS,
84WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
85See the License for the specific language governing permissions and
86limitations under the License.