Sacred Verses

A distraction-free presentation app for Bible verses and spiritual quotes. Verses fade in and out with smooth GSAP text animations, on a choice of 29 visual themes. Made for projecting verses during a service or for personal devotion.

It is a fully static web app: no build step, no backend. The verses come from one Markdown file.

Features

• Markdown content: all verses live in content/verses.md, separated by ---, each with optional metadata (Reference, Align, Type, Background).
• 29 themes: Catppuccin, Nord, Gruvbox, Everforest, Rosé Pine, Briar Rose and more.
• 15 text animation styles, from gentle fades to cascades.
• Background textures: 15 built-in paper and wall textures, and you can add your own.
• Theme, background texture and text animation are separate settings, and each one is remembered across reloads.
• Two fonts: Source Sans 3 and Source Serif 4, switchable at runtime.
• Spiritual Mode: hides everything except the verse.
• Keyboard control: arrow keys or Space to move between verses, F for fullscreen, S for Spiritual Mode, ? for the shortcut list.
• Installable as a Progressive Web App (PWA), via manifest.json.

The bundled content/verses.md holds a few German verses (Schlachter 2000 and Neue Genfer Übersetzung). Replace them with your own verses, quotes or translations.

Running it

Serve the folder with any static file server. Opening index.html directly doesn't work, because the browser blocks loading content/verses.md from file://.

python3 -m http.server 8000
# then open http://localhost:8000

To host it, upload the folder to any static web host.

URL parameters: ?theme=<theme-id> starts with a given theme (the file names in assets/themes/), ?verse=<n> with verse n (counting from 1).

Editing content

The user guide in docs/sacred_verses_user_guide.md covers everything: the verse format, the metadata fields, the content types (Markdown, plain text, HTML), per-verse background images, themes, textures and shortcuts.

Project structure

index.html                     Entry point / app shell
manifest.json                  PWA manifest
content/                       Everything you edit or add, no code
  verses.md                    The verses (Markdown, separated by ---)
  images/                      Per-verse background images (Background: field)
  textures/                    Background textures
assets/                        App code and built-in assets
  css/                         Stylesheets
  js/                          App logic, theme engine, GSAP libraries
  themes/                      One file per theme
  fonts/, icons/, images/      Fonts, UI icons, favicon
docs/
  sacred_verses_user_guide.md  User guide

Credits

• GSAP by GreenSock, bundled in assets/js/libraries/ under the GSAP standard license.
• Source Sans 3 and Source Serif 4 by Adobe, under the SIL Open Font License 1.1 (license texts in assets/fonts/).
• Background textures from Transparent Textures: Asfalt, Concrete Wall, Exclusive Paper, Rice Paper, Snow and Stardust by Atle Mo; Dark Stripes by Stefan Aleksić; Groovepaper by Isaac; Navy by Ethan Hamilton; Old Wall by Bartosz Kaszubowski; Otis Redding by Thomas Myrman; Padded by Chris Baldie; Rocky Wall by Projecteightyfive; Hexcellence.
• Bible verses: Schlachter 2000 and Neue Genfer Übersetzung (NGÜ), © Genfer Bibelgesellschaft. Each verse names its source.
• Theme colours based on Catppuccin, Nord, Gruvbox, Everforest and Rosé Pine.

AI disclosure

This project was created by AI with the help of human ideas.

License

Code: MIT. The bundled libraries, fonts, textures and Bible text keep their own licenses (see Credits).