vod frog#

vod frog, frog with the vods, i take the frogs on the vod. i vod on the frogs.

svelte 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!

Running#

npm install
npm run dev

Build for production:

npm run build
npm run preview

Project structure#

src/
├── app.html                          # HTML shell with OpenGraph meta
├── lib/
│   ├── api.ts                        # AT Protocol & UFOs API client, video fetching, handle/profile resolution
│   ├── theme.ts                      # Color scheme, seeded RNG, card offset/rotation generation
│   ├── WavyBorder.svelte             # Rectangular wavy border: SVG stroke + CSS clip-path polygon
│   ├── WavyCircle.svelte             # Circular wavy border for avatars
│   ├── MeshBackground.svelte         # Layered SVG radial gradient background
│   ├── PlantOverlay.svelte           # Fern leaves photo overlay with multiply blend
│   ├── FrogHeader.svelte             # "vod frog" header with frog illustration
│   ├── VideoCard.svelte              # Video thumbnail card with scrub preview and hopping frog
│   └── VideoPlayer.svelte            # Custom HLS video player with frog scrub bar and frogeye fullscreen
├── routes/
│   ├── +layout.svelte                # Global layout: fonts, cursor, background, plants
│   ├── +layout.ts                    # SPA mode config
│   ├── +page.svelte                  # Main video listing with pagination
│   └── profile/[handle]/
│       ├── +page.svelte              # Bluesky profile display
│       └── +page.ts                  # Profile route config
├── static/
│   ├── fonts/                        # Bundled PicNic and Fang webfonts
│   ├── froggie.png                   # Header frog illustration
│   ├── froggiestand.png              # Frog scrub sprite (standing)
│   ├── froggiejump.png               # Frog scrub sprite (jumping)
│   ├── frogeye.png                   # Fullscreen toggle button
│   ├── frogcursor-small.png          # Custom cursor
│   ├── frogicon.png                  # Favicon
│   ├── leaves.png                    # Fern overlay photo
│   └── opengraph.png                 # OG image
├── spec/                             # Design reference (mockups, assets, design doc)
└── tests/
    ├── load-test.ts                  # API load time, title ordering, handle resolution tests
    └── stream-test.ts                # Stream diagnostics: codecs, bandwidth, availability

Design#

Videos are fetched from across the AT Protocol network via the UFOs API (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.

Each 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.

Fonts are PicNic (headers) and Fang (body), bundled as webfonts.

Tests#

npx tsx tests/load-test.ts      # API + content tests
npx tsx tests/stream-test.ts    # Stream codec/bandwidth diagnostics

Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at

http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.

Configure Feed