🔫 p3r pause menu recreation

LET’S GOO i added the black text on the side! it took a lot of trial and error with a bunch of differnet methods, but it works now!

also, i write a lil blog post about the process making this thing, check it out here!

Changelog

• make the red part expand with animation
• more responsivness
• add the side text finally!!!
• Update +page.svelte
• add padding to warning
• improve layout
• add mobile warning
• fix options layouting
• move stuff right
• add vercel stuff
• add readme
• oops
  …and more

finally FINISHED!!
added a bunch of stuff, like sound effects, music, and the little pink thingy and little red thingy that follows you selection!
i’m still really sad i couldn’t get the side text to work tho… :(
i might try later

Changelog

• add red following thingy
• add more sfx
• add keyboard shortcuts
• add sound effects
• add music
• add some stuff to starting screen
• add offsets
• animate the pink thingy
• add the pink part

LET’S GOOOO I DID IT!!
i finally got the red thingy to work!!! yess!!! this took me like 3 hours and i wanna di-
anyway, now i need to add back the pink pulsing thingy and then i think i’m done.
i don’t think i’ll do the huge text on the left side, because i genuinely can’t think of a good way to do it. (right now it’s just covering the 3d model)

Changelog

• make interaction bounding boxes reasonable
• YESS FINALLY

RAHHHHH i’m almost done!! i’m literally so close!
i added the controls on the bottom right, and tried to add the red and text on the left side. these 2 are the hardest things to add.
first, the red part on the overlapping parts of the options text is hard to do, and i can pretty much only do it in a svg text element, instead of an html text element
second, the huge text on the left side of the screen is partly behind makoto’s head, HOWEVER i’m just using a video for the background, which means i can’t layer his head on top of the text. i originally thought i could just make the white part transparent by using davinci resolve, but it looked terrible so i decided i’m gonna just do a screen recording of the actual menu, with the text already behind it, then just edit out the number and add it in code. pheww.

Changelog

• readjust side text
• add left side text
• small changes
• add each description
• make the text shadows better
• add the text shadows
• add the bottom right controls
• try using svg clip path
• small adjustments

honestly didn’t do that much
i added the pink background selector, and added a pulsing animation. it looks really cool!
i spent like 2 hours trying to make the offsets and rotations look good, and its SO HARD to get the selector offset and size to look right.

i tried to get the red overlapping text in each option to work, but it’s really complicated, so that’ll be for next time

Changelog

• small adjustments
• add the pulsing background selector
• small changes
• selection cursor scaling!
• much better selection cursor placement
• small chagnes
• make the code a bit cleaner
• small position adjustments
• make the background video seamless
• some random stuff
• add the pink background selector

gng i might be cooking!! i got the selection logic all good, and it allows for me to maybe add keyboard navigation later on.
everything i need to do next:

• add the pink background selector cursor
• animate the pink background selector to ping at certain intervals
• slightly randomly offset the options horizontally
• add the huge text on the left side of the screen
• add the ui on the bottom right, showing what button to press
• add some banger background music!

started by finding the font used in the pause menu. turns out, it uses rodin pro, with super tight tracking. i downloaded the background video off reddit, but i have to figure out some way to remove the white background, so i can put some text behind makoto’s face.

Changelog

• add a cool title screen
• add the background video
• init all