Activity

mattseq

Shipped this project!

I found out about scrollytelling through the Lenis library. I saw some amazing websites using Lenis, searched it up, found GSAP, and started to discover all the amazing things you can do with them both. This project documents my learning as notes and a demo. It includes a ton of tips and tricks as well as resources for you. The demo uses techniques I talk about in depth in the notes. Obviously I’m a beginner with this but this project might help other beginners get a leg up and learn faster than I did.

mattseq

i was pretty much at a wall. nothing i changed seemed to work. i tried using claude to generate a few different programs using binary classification or probability based ones, multi-horizon predictions, etc. none of them worked very well and i had no idea what claude was doing. i went back to my model and just changed some of the hyperparameters like the interval, sequence length, and hidden size. i also added a “smart” strategy which isnt really smart, it just buys only if the model signal is the same as the naive signal. might mess around with combining the model signal with some of these other signals later. but right now i need to get this shippable. here’s graphs of TSLA and WDC

Attachment
Attachment
0
mattseq

deployed to github pages. formatted with prettier. i used github copilot to add some “Quick Notes” to the demo by using what i already wrote in the README. improved some of the text the same way and added better comments. this is the only part of the project where i used ai. i still need to update some of the notes to include stuff i learnt while making an actual website with gsap

Attachment
Attachment
0
mattseq

we have a new member in our team now. he was going to just be our sound designer but it turns out he’s pretty good at modding. unfortunately he doesnt know github somehow. maybe he’s a recent cs grad lol. anyway i’ve mostly been reviewing his new code. im about to start work on the next mob though called the concher, shown below. i really like the design and mechanics of it although they’re going to be tough to implement. i also cleaned up the branches we had earlier so we can begin using feature branches for new mobs

Attachment
0
mattseq

ok after a ton of messing around, i cant find a way to make it consistently better than just buying and holding. my theory is that it would work way better with daytrading rather than something this long-term. the shorter the timeframe the more the price is ruled by patterns rather than sentiment. the other path is parsing sentiment data from alpha vantage and giving that to the model, which i think could totally boost its performance. unfortunately alpha vantage intraday data is not free and the sentiment data is rate limited to 25 requests per day. either i find another source or i end the project here.

Attachment
0
mattseq

Shipped this project!

Hours: 11.49
Cookies: 🍪 50
Multiplier: 6.29 cookies/hr

mainly shipping bc my first ship in january got a really low mult (2.5) prob bc of bots. HOWEVER, i also added the ability to delete files and also started using an sqlite db instead of just json files.

mattseq

dockerized it and updated the README like 4 times. i found a cool way to build it so that the built dependencies are cached automatically by docker. also made a .env that the docker-compose.yml and spring boot app use. made the secret key configurable as well, instead of resetting every launch.

Attachment
0
mattseq

had problems using multilayer networks to approximate a simple quadratic equation. it was really dependent on the range: worked fine from -1 to 1 but terrible from -50 to 50. so i added scalers, specifically StandardScaler. i really didnt like how difficult it was to implement though, namely bc i didnt have methods like mean or sum and i also couldnt really use either of them by axis (like take the mean or sum along the columns). so now im refactoring my entire matrix class to both have that and also support higher order tensors (now that im thinking about it, i should rename it to tensor) which might come in handy later if i try to make CNNs. here’s a picture showing the approach im taking to making dynamic tensors using strides (which i believe pytorch also uses)

Attachment
0
mattseq

added the ability to delete files. i spent a really long time fixing a bug that had to do with my reverse proxy Caddy just routing DELETE requests to /files/public to the file server. it kept returning 404 and i was so confused until i tried deleting a private file, which worked. and then i remembered why they might be different. heres the error i was getting and what the old Caddyfile had.

Attachment
Attachment
0
mattseq

switched to using a sqlite database for file metadata instead of storing them in jsons and reading them on every request. i also added api endpoints for deleting files but i havent added that to the frontend yet and i also havent tested them. i used knex and better-sqlite3 for interacting with the sqlite db bc its just much easier than writing raw sql. also sqlite3 wasnt working very well and npm audit kept complaining but better-sqlite3 fixed it. i also had to switch my docker image from node:20-alpine to node:20 bc i think better-sqlite3 doesnt work for alpine or something, it was having issues and kept crashing. heres a picture of the stored files and db on my server.

Attachment
0
mattseq

worked on adding the new bogre shockwave effect to the giant bone. for some reason, if the shockwave spawned at the player’s feet, the player couldnt see that shockwave, so i just made it spawn where the player was looking. also the shockwave sound wasnt working so i fixed that, along with another bug in the ShockwaveManager.

1

Comments

mattseq
mattseq 10 days ago

aaaaaaand the sound doesnt work :(

mattseq

started prepping to ship this project. i needed a web demo tho so i used a dependency called springdoc-openapi that sets it everything up for me. had some trouble with the ui though so i had to add some config and change the main controller. i’m probably going to dockerize the whole thing next and host it on my rpi for the demo

Attachment
0
mattseq

Shipped this project!

Hours: 25.05
Cookies: 🍪 491
Multiplier: 19.61 cookies/hr

First and last version of the Team Obsidian website. Recently rebranded to Synapse Studios.

mattseq

added a music disc. for some reason you have to name the music disc “Music Disc” and write the title in the description. thats how all the other music discs are. unfortunately, FT wont let me attach the audio here but you can find it on the github page it was made by our new sound designer BoboTweaks (@Baderazem)

Attachment
0
mattseq

ok so i kept working on the lstm. i really dont want to give up or start over. i added a cool attention mechanism after the lstm output. not sure how much it helped but i also graphed how much each sequence timestep is valued using that which was cool to see. i also printed some more stuff like sharpe and directional accuracy. the model didnt seem to be picking up anything valuable but it was doing really well on both training and test sets so i made the model smaller to reduce overfitting and made a directional mse loss (not sure if that already exists with pytorch) so that it punishes it more for predicting the wrong signal (which is whats most important). its doing much better, at least for IBM and BA stocks but kind of breaks down for others.

Attachment
Attachment
Attachment
Attachment
0
mattseq

i dont even know what im doing anymore. i am completely and utterly lost. just about every lstm model demo i’ve seen online doesnt actually try to trade stocks based on their data and its clear that they might also struggle with the variance problem (not predicting prices that are varied and instead predicting prices close to the previous one). when i try predicting returns rather than prices or try predicting buy/sell signals, the model signals stagnate into just one buy/sell signal. random forest might actually be more promising

Attachment
Attachment
Attachment
0
mattseq

sorry for the 6 hr devlog. i wasnt sure how long i would work on this project and if i wanted to put it on flavortown anyway. this is my very first rust project and the main reason im learning rust btw is bc i c/c++ really annoys me. i have the most experience with python and java so i not used to lower level languages like c or rust but after trying C++, i kind of hated it but still wanted to have a lower level language under my belt so i decided to learn rust. i’ve already made a neural net from scratch before but with a lot of help from ai so i tried to use it as little as possible and only for debugging. i’ve actually learned a lot more about NNs bc of this approach, particularly about scalers for normalizing inputs. right now i have basic multilayer networks with relu and mse loss but i hope to expand to more activation functions, loss functions, and maybe even convolutional layers if i can figure out backprop for them.

Attachment
0
mattseq

started using prettier. first time using it or anything like it. its actually pretty cool, i will definitely use it for most of my projects moving forward. i also tried creating a loading screen since its kind of necessary bc loading all those images is kind of slow. didnt really work. i thought it did but apparently i messed something up so i just removed it. on the plus side, the portal animation doesnt have flickering textures anymore. theres actually a bigger problem which has nothing to do with how the websites made: our team rebranded. its now called team synapse (although i preferred synapse studios), has a new logo and color. how the heck am i supposed to make a website with the color orange?!

Attachment
Attachment
0
mattseq

basically just messed around with smarter strategies and comparing strategies. spent a while thinking of and trying out some smarter strategies paired with the model. so far, i just have a really simple one that doesnt buy unless the predicted return is higher than a certain percent (not just 0). i also decided to plot the model’s prediction compared to the last closing price it was given to see if the model was just parroting the input. it seems like its actually predicting properly bc the difference fluctuates quite a bit and isnt extremely close to 0. lastly, i tried to recursively predict the stock prices by giving the model only the first 60 days and letting it feeds its own next day prediction into itself. i was hoping it might fluctuate at least a little, but it just kinda flops in a gentle slope. here are some of the graphs (not all are from the same cycle). looking at the main one with the cumulative returns, you can actually notice some interesting patterns from the model-based strategy compared to buy and hold

Attachment
Attachment
Attachment
Attachment
0
mattseq

GOT LSTM TO WORK! took a look at a few kaggle notebooks. basically i just made the model bigger, increased the sequence length, had it predict prices rather than just binary classification, and used MinMaxScaler. i also simplified features so its really just the close price.

Attachment
Attachment
0
mattseq

tried an LSTM model. not sure how, but the youtube algorithm figured out i’d be interested in this video about someone making an LSTM stock prediction model: https://www.youtube.com/watch?v=V2l7cZxUpQs. they’re using tensorflow which might actually be easier but theres not that much of a difference. unfortunately their code is not fully opensource, you have to be a github sponsor to gain access to it. i couldnt really get my lstm model to do very well, it kind of just accepts defeat and learns to just output the average of the outputs. here you can see that my targets are just 0 and 1 for up and down and the model just slowly starts to average out to predicting around a 0.5. i think im going to go back to random forest for a little while, there were some things i wanted to try out.

Attachment
0
mattseq

another 2 hrs down the train. i tried a ton of different configurations including relative features, expanding vs rolling windows for training and just made sure that there was no leakage of testing data into the training data. i also added vix as a volatility index but it doesnt look like it helped much. i also realized that i should prob be graphing the actual stock prices not just cumulative returns, so i can see where the model is failing. i also found an video of someone using LSTM for stock prediction, which i want to try, but that might take a lot more work. im probably going to either do that or add sentiment scores and other data to my feature set next.

Attachment
0
mattseq

tried gradient boosting models but they didnt seem that much better, maybe i’ll test them more thoroughly later (xgboost is much faster i think). i went back to random forest and i noticed something interesting. although the cumulative model returns are clearly below the buy and hold returns, it begins to more or less mirror them and actually starts gaining back the distance it lost. i changed the training window to expand instead of roll so that it gets as much training data as possible and then ran it on about 20 yrs. it started off rocky but then clearly began beating the buy and hold returns and compounding. im not sure if this is due to some sort of data leaking again from me, bc i double checked everything and it seems plausible with that much data.

Attachment
0
mattseq

sorry that this devlog is 5 hrs in, i wasnt really sure how far i’d get with this project. at first, i started by using neural networks which im most familiar with but they didnt get great accuracy. then i learned about random forest models (and other decision tree based models) and started using that. i was getting insanely high returns which at first was exciting but then i quickly realized that i was probably doing something wrong. as it turns out, i was accidentally leaking the targets to my model by how i was training it. after fixing that, random forest wasnt much better than buy and hold returns. so now im researching and testing gradient boosting models. this is the latest performance of random forest on IBM stocks from 2005 to 2025

Attachment
0
mattseq

added automatic stashing so that it doesnt take so much memory when there are tons of block changes. i also added a HEAD file like git and made commits store their parent commit. this should make it easier for branches later. something strange happened with the new hytale version: the git command was already used. hytale literally added a git command to be used with assets and packs. i had to switch my command to /gitgud. i released v2 with file compression and automatic stashing

Attachment
0
mattseq

been really locked in on the website lately. i invited my other team member to help me but he hasnt done much except update the description. anyway, i reworked the carousel to be horizontal which looks much nicer, used canvas for the portal intro animation instead of switching between image srcs and i also preloaded the intro animation images as well. after that i did a ton of cleanup and refactoring, including creating an entirely new file structure separating all the components and subcomponents properly and separating the animations for those components into their own files. and i finally pushed those changes i made to the particle field. 5.5 hrs of work and it looks pretty much finished. i still want to look into optimizing the site, especially with all those images, and then of course seo, which i’ve never dealt with before. btw you can view the website on vercel, the link is on the github repo. and now im just realizing i need a readme bc rn its the default nextjs readme.

Attachment
0
mattseq

spent 3 hours figuring out GSAP’s Flip plugin. its honestly amazing, but i had a hard time getting it to work. i can already think of a lot of uses for it

0
mattseq

added animations to the gallery (looks awesome now). also started using a delay on scrollTrigger’s scrub property. for example, for the parallax and the gallery loading. also made the gallery images link to their source so that people can click on it for the image. here’s a video with all the changes.

0
mattseq

spent a while trying to refactor the team section, but i ended up reverting all the changes bc i kept messing things up and it was getting annoying. i did add a footer and a gallery though, which look really nice. i also tried changing the particles in the back, using circles instead of minecraft letters. i havent committed the particle changes bc i dont know if im going to keep them or not.

Attachment
Attachment
0
mattseq

compresses files using gzip now.

Attachment
0
mattseq

i thought this would be a lot harder but honestly it was easy. first i watched some videos on how git works, this series by Brief was amazing: https://www.youtube.com/watch?v=fWMKue-WBok&list=PL9lx0DXCC4BNUby5H58y6s2TQVLadV8v7. git actually has a really elegant solution to storing snapshots of files efficiently and exploiting file structure to do so. i wont elaborate on the details, you can watch the video if you like. so far its only around 130 lines of python, but i only have basic commits using the whole object system. im not sure how much i want anvil to be similar to git tho, i might make a remote server like github but using locks so only one person can push changes at a time. thats how it used to be done and it means i dont have to implement merges and all those more complicated stuff. also i just want to experiment around with various version control ideas. heres a picture of one of those objects, specifically a tree that references other blobs with their hash

Attachment
2

Comments

anderson
anderson about 2 months ago

Considering helloworld on python takes 0.038s, and on C 0.003s (and probably scales more efficient), I wouldn’t even think of using it as my VCS

mattseq
mattseq about 2 months ago

Yeah ik. I wanted to try to make it first in an easier language and then rewrite if I had the motivation to continue the project. And right now it seems like I don’t. This one’s probably going to graveyard but it was fun to make anyway

mattseq

releasing the mod today! its not entirely complete, the commit jsons arent compressed, block changes arent stashed at intervals so it might take a lot of memory after a lot of block changes. i improved the commands, wrote the README, etc. i also learned github actions yesterday, so i set up one that automatically creates issues from any TODO comments, which was cool, although not that useful for a small project

Attachment
0
mattseq

ok just finished up. changes are now automatically stashed and unstashed when stopping and starting the server so they’re never lost. i also added a status command as well, so its a bit more obvious whats going on. as promised, i recorded a video demo but it was too large to attach to this devlog so here’s a google drive link: https://drive.google.com/file/d/1O23bMkSVQa4SZZll06KLZY89ol3WN7id/view?usp=sharing

Attachment
0
mattseq

forgot to devlog for a while. i’ve most of the basics working. block tracking works (just for placing and breaking blocks), i can commit those changes and rollback to the previous commit. its not the most optimized vcs, it doesnt have hashing, buckets, file compression, or objects + trees, and it records block changes at the same position multiple times, but it does work. besides it doesnt have to store as much as git since its storing deltas not whole snapshots. im too lazy to record it but i will on the next devlog, promise. rn im working on stashing block changes if the server is turned off or at a fixed interval to prevent it from taking up too much memory

Attachment
0
mattseq

just got started with setting up my environment. i cloned a plugin template off of github. its pretty well made, it basically looks inside your hytale game files and uses server.jar from there, and when u run it i runs server.jar with your mods. then you can just join with your client. had to make a small change to the build.gradle bc my hytale files dont exist in the default location, they exist on another drive. i also got started with some of the block tracking using events. i found this repo where someone already made git for minecraft (which was my original idea a few months ago) https://github.com/rayyankhan47/Blockbase which is helpful to base it off of

Attachment
Attachment
0
mattseq

added a initialization endpoint so that an admin can be created when the service first starts. had to make this bc only admins have permissions to create users but when the service first starts and there are no admins, its otherwise impossible to create an admin, which results in a weird permission paradox. the initialization endpoint only works when there’s no admins already in the db. i also added a README, finally.

Attachment
0
mattseq

took me 2 + 1/2 hours to add paintings. yep. u read that right. there was no kaupenjoe tutorial for adding paintings in 1.20.1 even though he made one for fricking custom signs (cmon kaupenjoe get your priorities straight). anyway i was digging through source code and also looked at the 1.18 tutorial. i eventually found a solution in kaupenjoe’s discord. i was partially correct but i did need to make a placeable.json file after registering the painting variants. heres some pictures of my code and also the paintings in game.

Attachment
Attachment
Attachment
1

Comments

chefpenguino
chefpenguino about 2 months ago

whats your vscode icon theme? i love it

mattseq

took me like 30 minutes to switch from h2 to postgres. it was so stupid bc i put a colon instead of a slash in the database url. i was just running a postgres docker container on my rpi instead of the laptop im using. eventually i should make a docker-compose.yml to include the db. it was surprisingly easy to switch databases, all you need to do is change the url name and add the postgres driver as a dependency.

Attachment
0
mattseq

added jwt auth filter. basically it just extracts stuff like roles from the jwt and passes it on as SecurityContext and in my SecurityConfig i can use methods like .hasRole() on specific URIs. i also included claims in the jwt so that it contains id, username, roles, etc. and it also has specific extract methods but i might combine those into one that returns a User.

Attachment
Attachment
0
mattseq

its now hashing passwords with Bcrypt. here’s a picture of me using the h2 console to check what the passwords stored as

Attachment
0
mattseq

renamed the project to auth-service. i also implemented the login and verify endpoints using jwts. i also started using postman for the first time to test my api, since im on windows and used to ssh into my rpi just to use curl. im still not hashing passwords yet lol. heres a picture of my postman flow that i used to test

Attachment
0
mattseq

started by watching Mosh’s spring boot tutorial. dont really know how im supposed to use some of that stuff though. got started with creating a database with spring jpa. just using h2 for now, i’ll switch to postgres later or something. all i did was get the repository and basic crud working and user methods working. ran into a small issue with spring security automatically asking for authentication at every endpoint. next i need to create jwt auth, and use the security filter stuff provided by spring security to block certain endpoints. then i’ll create roles and make the verify endpoint

Attachment
0
mattseq

just been working on various small things to polish. found a few bugs myself as well. here’s my notes. i just finished all the bugs/issues assigned to me, jay’s working on his, and i’m going to keep bug testing and fixing whatever i find.

Attachment
0
mattseq

learnt Three.js and how to animate models with GSAP.

Attachment
0
mattseq

for the past few days, i’ve been working on an actual website implementing some of these techniques. i learned a lot, like how to make hover animations, video animations, and most importantly i learned that GSAP’s pin is far superior to position: sticky and is more flexible. i dont really have any good pictures so here’s a picture of the site i was working on.

Attachment
0
mattseq

added a progress indicator for the carousel. unfortunately they’re both positioned absolutely so it gets messed up when the screen size changes. def gotta fix that. i also noticed something really important. when looking at others websites, specifically GSAP’s showcase site, i noticed that they dont have to make scene containers super tall in order to have sticky objects. it turns out they were using GSAP’s pin which I already discovered but didnt really understand how useful it was. instead of creating really tall containers to hold the sticky objects while you scroll down you can just pin the whole scene container with gsap and define how long you want it to stay like that. the other animations work as usual and can still work on scroll. I replaced the sticky positioning in the inhabitants section with that and i plan to do so with as much of the rest of the site as i can.

Attachment
0
mattseq

decided to make a carousel for the mobs features in Inhabitants. doesnt look too bad but the images are positioned absolute and their parent’s sizing is messed up. its fine tho ig. ts gonna look terrible on mobile. i also changed the font. oh and did i mention its on github now? it still looks like a beginner made it, which to be fair, is accurate

0
mattseq

tried my best to make the member cards glassy. doesnt look too bad but not what i imagined. i like the blur though. I also made a transition to the mod section. i added a glow to the bottom of the team section to break up the black background a bit. i also started on the mods section but im not sure how to go about it.

Attachment
0
mattseq

had a random idea for the next scene. show the team obsidian logo and have some parallax objects behind it. i decided to use Minecraft’s enchantment alphabet. it’s a little heavy for the client so i’m not sure if im going to keep it. i also definitely need to find some way to measure performance.

and i did it again. i forgot i was writing this devlog and kept working. now i just finished with the team section. it shows a circular profile pic for each person but when you hover over it the card surrounding the picture appears which has more information.

0
mattseq

basically copied a part from the old website. when you first load, it shows a nether portal with some mobs around it and when you scroll it zooms into the portal and then shows the main page. i just recreated that, except with gsap (which has scrubbing). i also tried to make it as performant as possible by getting rid of the image entirely when the animation is finished playing. im going to try and make the ScrollImage component that i made for it a little more modular now. here’s a video of the animation and some of the code. it basically just loops through animation frames captured in blender. Jeremy said he’d make a version with more image frames or give me a video i can use instead so we can make it smoother.

Attachment
0
mattseq

ok fixed a minor mistake. i thought i had to wrap the ReactLenis component around my content but you’re actually supposed to just leave it as a standalone component at the top. ig i kinda skimmed the docs since there’s an example of this on there. i had to go back and fix this on my other projects as well. here’s a picture of the docs and then a picture of what my code is now. before, i had the AnimationWrapper (which is essentially the ReactLenis component) wrap around the other content

Attachment
Attachment
0
mattseq

ok took a while looking at what we already have (what Jeremy already made). he used framer motion instead of gsap tho. i decided that its probably best to just redo the whole website instead of trying to make changes to the existing one. it will probably take me less time and the result will be better and with less clutter from old code. I created a new Next.js app and tried setting up GSAP + Lenis like I have with other React apps. I immediately ran into some problems with SSR. this is my first time using Next.js so it took some getting used to. I separated the basic HTML from the animations so that the animations would run directly on the client and the HTML could be rendered server side. i had to implement a mount check to see if the elements were in the DOM before the animations tried to run. i havent yet made a github repo but here’s a screenshot of some of my code. its an AnimationWrapper which returns a ReactLenis element and passes down children. it handles all the gsap animations as well, calling Animate()

Attachment
0
mattseq

finally animated videos on scroll! it was pretty easy actually, since GSAP had an onUpdate() callback i could use in animations. its kinda laggy tho. i would record a video but i already launched battefield 6 sooooo… Here’s a picture of all the commits from today

Attachment
0
mattseq

wrote about gsap timeline. made this cool animation with cards. It made me realize that i also need to figure out how to do hover animations, probably with GSAP’s Observer plugin. I’m starting to really appreciate the GSAP system. definitely using it over Framer Motion from now on.

0
mattseq

so i just spent like 50 mins trying to make this one transition i saw on a website. basically a curved container with a different background begins to cover the viewport and then transitions into the next scene. I ended up doing it a little differently by making the rounded corners animate to flat again. the website used a parallax effect but i found that was a little difficult so i improvised. i also added some parallax and scaling to the text on the next scene, just to see how it would look. the website i was looking at was https://sav1n.com/. i also finally recorded my demo site

0
mattseq

ok just finished up with writing about

i forgot i started writing this and kept working. whoops. i was about to say that i just finished writing in the README on svg manipulating and already started on parallax. now im actually done parallax. it wasnt too hard once i thought about it. i was kinda sad i couldnt use GSAP’s ScrollSmoother tho since they make it really easy and add some useful stuff too.

Attachment
Attachment
0
mattseq

ONE AND A HALF HOURS LATER…
damn GSAP’s SVG plugins are hard. well really it was just DrawSVG. i didnt really read the docs very closely to begin with so i didnt know that it only affects strokes in an svg not fill. stroke-only svgs are very hard to find it seems. i ended up copying one off a GSAP demo. as for MorphSVG, that was a bit easier. i have yet to write in the README about all this so I’ll commit after i do that. another thing i realized is that GSAP’s “pin” is almost certainly better than “position: sticky” at least when u have multiple sticky objects in the scene since with sticky positioning they just collect on top of each other at the bottom of the scene container when it starts to leave the viewport. here’s a picture of the orange svg being drawn. i know, i should record it, im just too lazy to launch obs rn.

Attachment
0
mattseq

Shipped this project!

Hours: 8.69
Cookies: 🍪 22
Multiplier: 2.53 cookies/hr

first ship

mattseq

ok just made a few changes so that i can ship. made uploading files a little more obvious

Attachment
1

Comments

tobi the wife lover
tobi the wife lover about 2 months ago

twin lmk if you need a subdomain with HTTPS, i am more than happy to help

mattseq

made a CONTRIBUTING.md. hope people will actually contribute but not expecting it. I also compiled a list of scroll-driven techniques to experiment with such as:
Horizontal Scroll
Parallax
SVG Morphing
Video
3D Models
Graphs

im think im going to try taking a look at SVGs next. either that or parallax

Attachment
0
mattseq

figured out the zoom effect! was reading through GSAP docs and found a property called pin, which does essentially the same thing as position: sticky but works even with overflow: hidden. now i can use overflow: hidden on the scene contanier to hide the horizontal scrollbar and pin the object in the viewport, scale it up and then transition to the next scene container, whose background perfectly matches that of the scaled-up object. I also found some cool new plugins when looking through the GSAP docs such as SplitText and DrawSVG. I wrote a bit about using SplitText and im definitely planning on experimenting with DrawSVG later. I also committed it all to a github repo, including both my notes and my experiments.

Attachment
0
mattseq

I had already figured out how to do basic “sticky scenes” as i call them but i’m currently trying to do a zoom-in effect. my initial idea was:

  1. Start with a single sticky object in the scene container
  2. Animate that object to scale until it fills the entire viewport. You should have overflow-x: hidden to prevent the horizontal scrollbar from appearing.
  3. Create a new div with the same color as the zoomed-in object and fade it in on top of the old object.
  4. The sticky scene should end and the new div is now the scene container.
    The only problem is that position: sticky doesnt work if you have overflow-x-hidden.
    Also, I haven’t yet committed any of this to a github repo bc im not sure how its going to turn out. I’ll probably do it after i figure out the zoom effect.
Attachment
0
mattseq

basically been messing around with Lenis and GSAP until I realized there’s not a lot of help online for common scrollytelling techniques, so i decided i might as well format the notes i was already creating so that others don’t have to figure it out for themselves. i actually discovered scrollytelling from fellow hackclubbers participating in Summer of Making who used Lenis in their portfolios.

Attachment
0
mattseq

ok just finished adding file dropzones! had a bit of a hard time figuring out how make it look the exact same but have the dropzone underneath. the only thing i dont like is that its not very obvious that it even exists. unless you actually tried to drop a file, you wouldnt be able to tell that its possible. also i realized i should probably have some sort of loading screen or something while it uploads files. maybe should also implement a size limit but i really dont want to limit file uploads in any way especially by size.

Attachment
0
mattseq

just did some styling. had to use github copilot a bit bc i suck at styles and colors, but eventually landed on something i liked and worked from there. i also just used ai to make a banner image for me to put on flavortown bc it looks really empty without one. here’s a before and after picture of the site as well as the banner

Attachment
Attachment
Attachment
0
mattseq

used express-session for auth. pretty easy to setup, at least for one user. i still havent made file uploading possible through the frontend. i’ll probably do that next since im too lazy to set up multiple users. i did also make the frontend fetch private file metadata which only took a bit of copy + paste. also yes i uploaded the exact same file for every single test

Attachment
0
mattseq

ok i just finished with some frontend stuff: it fetches public file metadata and displays them along with a link to where its actually hosted. there’s also space for displaying private files later. i would have done that too but i need to make the backend send a jwt cookie instead of just the jwt token itself (or get express-session working). for a while i was just trying to figure out styling. i understand it in principle but it always becomes harder in practice

Attachment
0
mattseq

ok so i didnt actually do much coding, but i did do some research into express.js and other questions i had. I’ve uploaded a pic of my notes below. i found out how i could implement rate limiting later, but most importantly i figured out how to user express-session. this should be really helpful when making multiple users later. in order to store user data though, i would need a database like redis or postgre. its also probably best if i switch from storing jsons for file metadata to using a db since it will probably be accessed very frequently. so it looks like the plan is: switch from storing jsons to postgresql for file metadata; use express-session to allow multiple users and connect it to the postgresql db. i still want to do some research into how express-sessions actually works first, though, since its not obvious HOW exactly it authenticates the user. anyway, the coding i did do was just getting the frontend to fetch file metadata from the endpoints i already set up. not done yet, so i havent pushed a commit

Attachment
0
mattseq

added basic frontend with login (doesnt store jwt cookie yet), configured caddy to expose the api, added /api/auth endpoint to check auth. had a problem for a while with this annoying error:

Failed to load module script: Expected a JavaScript-or-Wasm module script but the server responded with a MIME type of "". Strict MIME type checking is enforced for module scripts per HTML spec."

the browser fetched the html file properly but it couldnt get the css and js files that it referenced. I thought it had to do with the base url in the vite config, since i was building static files and servign them. i’d seen this same problem before and changing the base url worked. it turns out it was Caddy this time. i used handle_path instead of handle. handle_path strips the path prefix so it was looking for the js and css files in the wrong place. lesson learned! hopefully, i never make that mistake again.

Attachment
Attachment
0
mattseq

before i even started coding i needed to set up the storage. im using this on my rpi 400 (running alpine linux) for testing but it only has 16gb and im almost out so i dont want to use it for storage. i found a 64gb usb that i can use tho. i just had to figure out how to mount the new device so i could access it. after that, i just made a simple api for logging in and uploading files. Tech stack: Docker, Express.js for the backend (first time using it), Caddy, and probably React for the frontend later. the public files are served directly from Caddy and the private files are served from Express with authentication. it basically just makes a random id for the uploaded file and saves it with that id. it also saves some metadata including the original name in a json file. Heres a picture of some of my notes and the docker-compose.yml which uses the usb drive as storage with /mnt/drive

Attachment
Attachment
0
mattseq

added the 2 new Bogre dishes: Uncanny Pottage and Stinky Bouillon. Also made some changes to the Fish-Snot Chowder. apparently it was a FoodItem not a BowlFoodItem so you could just eat the entire bowl along with the chowder. fixed that and also made it not give nausea if you ate it underwater. Here are the mechanics i was instructed to implement:

  1. Uncanny pottage (requires spider eye or rotten flesh). After eating player will get new effect - rotting disguise making nearby monsters neutral for 30 secs (means if player attacks them they immediatly attack back). adds 3 hunger and saturation and gives Hunger effect for 15 secs.
  2. Stinky bouillon (requires poisonous potato). Restores 4 hunger and saturation and removes all negative effects from player. for every negative effect that was removed +3 saturation and hunger restoration. Gives poison 1 for 10 secs if no statuses was removed.
  3. Fish-snot chowder (requires fish as usual) consuming gives Nausea for 15 secs and restores 8 hunger and saturation. If was eaten underwater no Nausea will appear.

Everything is done, but i still need an icon for the Rotting Disguise Effect, im using rotten flesh for now.

Attachment
Attachment
1

Comments

chefpenguino
chefpenguino about 2 months ago

this is so sick

mattseq

spent about an hour changing the model and stuff to be closer to what our artist/designer wanted. we ended up not doing it that way because the z-fighting caused by the glowmask requires some changes that make it look weird. heres a picture. the inside is glowing but i had to move that glowmask layer up a little so it looks sus

Attachment
0
mattseq

more work on the warped clam. made the pearl ambience particle spawn on the corner of the pearl, made both the warped clam particles animate through their spritesets. i also put in a new model i was given. there were some problems with what’s called “z-fighting” (where the textures are overlapping and are “fighting” over the same position) so i had to change a few things.

Attachment
Attachment
0
mattseq

just worked on warped clam particles today. added a new one to show when the clam has a pearl. i also disabled the glowing layer whenever the clam doesnt have a pearl

Attachment
1

Comments

yefoi
yefoi 3 months ago

end update finally 🎉 those little things look so unsettling but also very fitting

mattseq

apex’s charge now properly breaks shields (earlier it only broke the shield in the offhand). i also moved the code for the dryfang’s rival fight from customServerAiStep() into a separate goal which fixed the target selection (one of the other target goals wasnt activating at all after the rival fight)

Attachment
0
mattseq

improved the collision detection for the apex’s charge goal. instead of just using minecraft’s mob.horizontalCollision (which hardly works), i made a custom box in front of the apex and it checks whether there are any blocks in that area

Attachment
0
mattseq

just re-adding some small tweaks that got lost in another branch. the giant bone can produce a shockwave when used and you can feed it to wolves to give them a health and strength buff

Attachment
0