When my daughter’s school was putting on a production of Romeo and Juliet, I wanted to create scrolling credits for the livestream. What started as a simple HTML file turned into a full-featured web app that anyone can use.
The Problem
I needed a way to display professional-looking credits during the stream – cast, crew, and acknowledgements – that would work seamlessly with OBS. After manually typing out all the names into an HTML file, I thought: “Why not make this easier for everyone?”
The Solution
I built a credits generator that lets you create beautiful scrolling credits with just a web form. No coding required.
Try it here: whyisjake.github.io/credits
Features
- Two Styles: Classic vertical scroll or Star Wars-style 3D perspective crawl (complete with animated starfield!)
- Full Customization: Colors, speed, and content – all adjustable
- OBS Ready: Works perfectly as a browser source for streaming
- Save & Load: Your credits save automatically in your browser
- Zero Setup: Just open the site and start adding names
The Star Wars Effect
The most fun part? Adding the Star Wars crawl option. Using CSS 3D transforms and a canvas-based starfield animation, credits now recede into the distance with that iconic perspective effect. It’s surprisingly satisfying to watch your school play credits disappear into space.
How It Works
- Visit the site and fill in your production details
- Add cast and crew members (with helpful placeholder examples)
- Choose your style and customize colors
- Click “Generate Credits”
- Point OBS at the player URL or download for local use
The whole thing is client-side – no server, no database, just localStorage. Perfect for GitHub Pages.
Use It Yourself
Whether you’re streaming a play, making a video, or running a production, feel free to use it. It’s free, open source, and requires no account.
Check it out: whyisjake.github.io/credits
Built with vanilla HTML, CSS, and JavaScript. Sometimes the best tools are the simple ones.
Leave a Reply