@ox-content/theme-analog-film

Analog Film — Grain, halation and sprocket rails with a gentle gate weave — for Ox Content.

Form only. Geometry, texture, typography and motion, written entirely against --octc-* custom properties. It names no colors, so it pairs with any @ox-content/theme-color-* scheme. About 10.6 kB of CSS, zero JavaScript, zero runtime dependencies.

npm install @ox-content/theme-analog-film @ox-content/theme-color-tokyo-night

// vite.config.ts
import { defineConfig } from "vite";
import { oxContent } from "@ox-content/vite-plugin";
import analogFilm from "@ox-content/theme-analog-film";
import tokyoNight from "@ox-content/theme-color-tokyo-night";

export default defineConfig({
  plugins: [
    oxContent({
      srcDir: "docs",
      ssg: { siteName: "My Docs", theme: [analogFilm, tokyoNight] },
    }),
  ],
});

Layers compose left to right, so anything you append wins:

theme: [analogFilm, tokyoNight, { colors: { primary: "#ff5f56" } }];

Motion

Transitions, scroll-driven reveals and cross-document page transitions are all declarative CSS — no router, no observer, no client bundle. Everything sits behind @supports and is switched off under prefers-reduced-motion: reduce.

Retune the choreography without touching the stylesheet:

theme: [analogFilm, tokyoNight, { tokens: { "motion-base": "200ms", "motion-ease": "linear" } }];

License

MIT