filipriec/Tui-pages-website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
51beca27760b187104fd865691da00185960cd48
Tui-pages-website/README.md
Priec 78407ae9e8 prod ready
2026-06-02 23:06:09 +02:00

1.9 KiB
Raw Blame History

tui-pages website

Static marketing site for the tui-pages Rust crate. No build step — it's plain HTML/CSS/JS.

Build & serve

make serve     # serve the working tree on http://localhost:8000
make size      # report file sizes
make validate  # quick HTML syntax check

Just edit the .html / static/ files and refresh.

ASCII video background

The full-page background is a video re-rendered into animated ASCII. ffmpeg extracts frames, chafa turns each into an ASCII grid, and tools/build_mountain_js.py bundles them into static/js/mountain.js, which the page plays back.

Render a video

  1. Drop your clip in video/, e.g. video/nature1.mp4.

  2. Render + bundle (needs ffmpeg + chafa, so run in the nix shell):

    nix develop -c make video NAME=nature1 SIZE=480x144 SCALE=1920

  3. make serve and hard-refresh the browser (Ctrl+Shift+R).

  • NAME — the file name without .mp4.
  • SIZE — ASCII grid cols×rows. Bigger = sharper + heavier bundle. Keep the ~3.33:1 ratio (e.g. 80x24, 160x48, 240x72, 480x144).
  • SCALE — source pixel width fed to chafa; scale it up with SIZE.

After changing SIZE, set a matching font-size in static/css/ascii.css (lines 32–33, the two font-size: max(...) declarations) so the ASCII fills the screen. The font-size scales inversely with the grid: halve the grid → double the font-size. The two max() multipliers are:

  • vw multiplier ≈ 1 / (cols × 0.6) (0.6 ≈ JetBrains Mono char aspect ratio)
  • vh multiplier ≈ 1 / rows
SIZE font-size in ascii.css
480x144 max(0.35vw, 0.695vh)
360x108 max(0.463vw, 0.926vh)
240x72 max(0.7vw, 1.39vh)

Current setup: 240x72, font-size max(0.7vw, 1.39vh).

License

MIT. Crate: https://gitlab.com/filipriec/tui-pages.