Above you should see a faithful recreation of a prophecy pane, as seen throughout Deltarune Chapter 4. It is written entirely in CSS, with a small amount of HTML to display the graphic.
This one has been modified to display the graphic used on this website's homepage. It is an animated version of the profile picture that I use across several of my accounts on various websites. In case you don't know, it features a pixel art version of Shaggy from chill station's version of "You reposted in the wrong neighborhood", mirrored horizontally.
Prophecy... what now?
If you don't know what I'm talking about, stop reading now and go buy and play the game. If you don't think you'll like it, play the demo, then buy and play the rest of the game. I'm quite sure you'll have a good time, and maybe even enjoy the story as well.
(although chapter 1 was kind of mid in my opinion, at least compared to the rest of the game...)
Why did you make this?
This is my favourite effect in Deltarune so far. If you've been following me for a while, you'll notice my profile pic on a lot of my accounts got updated to this one shortly after I played Chapter 4 (late-June 2025).
How did you make this?!
With HTML, CSS, and difficulty (seriously, this is the third programming language I've attempted to make this in). JavaScript was not required to make this demo, although it will be needed for customisations (Coming Soon™).
Bugs/TODOs
- No customisability at all. Planned for a future update, and will replace this page.
- Possible timing issues compared to base game, TBD.
- Only one colour is currently supported: the default in-game one.
- There exists an implementation for the Second Sanctuary colours (more purple hue, including some rendering bug emulation from the base game!) using CSS filters.
- JavaScript will most likely be used to toggle between the two, defaulting to the regular colours.
- Full custom colours may be trickier, depending on how I want to do it.
- Possible alignment issues with the three main elements (background, foreground image, and text).
- ...and probably a lot more, including browser compatibility quirks (this was mainly tested on the latest version of Firefox, although I did test this on a few different platforms and browser engines).
Troubleshooting
- If you're experiencing any of the following issues, update to the latest version of a modern browser (e.g. Firefox, Chrome):
- No image at all (blank space)
- Blurry image
- Lack of animation (i.e. completely still image)
- If the animation is laggy or freezes, your computer/phone/smart fridge is likely too old/underpowered to run it at full speed. You'll need to try again on a more modern/powerful device (sorry).
- That being said, I got this working just fine (although somewhat slowly) on an iPod touch 5th gen running iOS 8 (iOS 9 on does not exist on A5 devices, and you cannot convince me otherwise).
- If the text and/or image is cut off, you'll have to zoom out the page if possible. ProphGen was not optimised very well for mobile devices, and I don't know how to fix it without a significant rewrite. An option will be added to adjust the size of the prophecy pane in the future.