Log inSign up
project logo

notoforms

paper-news-animator

Public
Remixed
Starter template with client-side React & Hono server
Edit with AI
1 Branch
Val Town is a collaborative website to build and scale JavaScript apps.
Deploy APIs, crons, & store data – all from the browser, and deployed in milliseconds.
Sign up now
index.ts
README.md

📰 Paper News Animator

Type a word → get animated newspaper-clipping videos with your keyword highlighted across multiple unique frames → export Full-HD video straight to your device. Inspired by paperanimation.ai, built to run entirely in the browser on Val Town.

What it does

  • Type any keyword — it becomes the headline + a highlighted word inside dense, justified newspaper columns.
  • Multiple clippings — each "frame" is procedurally generated with a different serif font, layout, paper texture, tilt, and creases (seeded so it's reproducible).
  • Animated highlight sweep — a marker wipes across your keyword on each clipping, then cycles to the next.
  • Live preview at 9:16, looping in real time.
  • Full-HD export at 1080×1920 (vertical, perfect for TikTok / Reels / Shorts):
    • WebM video via the browser's MediaRecorder (true HD video).
    • Animated GIF via gif.js (worker-encoded).
  • Customizable: highlight color, paper tint, number of clippings, seconds per clipping, and FPS.

Why WebM and not MP4?

Everything renders client-side — Val Town runs Deno with no GPU, no ffmpeg, and no subprocesses, so server-side MP4 encoding isn't possible. The browser can encode WebM natively at full HD, which plays on modern players and uploads fine to social platforms. (If you specifically need MP4, convert the downloaded WebM with any free online converter or ffmpeg -i in.webm out.mp4.)

Architecture

Rendering mermaid diagram...

File structure

index.ts                       ← Hono server (serves the SPA)
frontend/
  index.html                   ← HTML shell (Twind + React)
  index.tsx                    ← React entrypoint
  components/
    App.tsx                    ← root layout + export orchestration
    Controls.tsx               ← keyword, color, texture, sliders, export buttons
    CanvasPreview.tsx          ← looping requestAnimationFrame preview
  lib/
    newspaper.ts               ← procedural newspaper-clipping canvas renderer
    exporter.ts                ← client-side WebM + GIF encoders & download

Roadmap ideas

  • More styles (magazine ransom letters, press coverage, paper fold).
  • Sound effects on export.
  • Save/share generated clips (would add SQLite + blob storage).