50 Experiments

Gonna ship now since no time left but gonna add other effects slowly after publsihing

Basics is done, now i jsut gotta add all the effects!

Getting started on the landing page for the first ship due in 2 hours 😭😭

This effect is also done!

Made this curved marqueeeeee!! Inspired by -> https://www.osmo.supply/

Still a lot more to fix here but yeah thats low key it

It also has the scroll boost and the direction change on scroll just like my previous marquee!

Another effect in! I saw this effect on gta 6’s website, as well as other awwward winning sites. i recently made a very similar animation for one of my clients too, so i thought why not do something similiar here as well!

how is this looking? personally for me i dont think it is that impressive and i dont even think it is accurate, ill just mark it as a flop experiment lol

here what i am doing is i am creating a 3d Depth map of the image using three js in order to determine which objects are closer in the image, thats tradditionally done using ML depth models i guess but right now i am just faking it from just the 2d Image pixel info.

Completed the effect! Now it also supports transparent images! and also optimized it in a way so that even with full size image it does not lags

the key to making it lag free was making sure the cell size and the font size of each ascii characters is in propotion to the widht and height of the canvas. because in bigger images the hard coded cell size and font size was making bigger images look highly detailed - which was making it slower.

Hey everyone! its been a while since i posted a devlog lol (was super busy with client work)

But here’s what i am working on - it’s 80% ready! Inspired by :- https://2025.unseen.co/ ’s hero section

Here in this effect if you give any image to this code it is gonna convert it into ascii (you can either choose coloured or black and white version of it) and then on top of that when you move the cursor on top of the image it is gonna scramble the texts like in a liquid flow i dont know how to explain it that good but it is what it is lol

To make this i had to make a really complex logic that simulates the fluid

see the demo video too see it in action! (its soo cool!!!!!!!)

not been doing much lately because exams are going on currently, but this is what i did today, i am trying to create a card flip effect.

Made this button! but i still havent finalized it yet and i dont even if this is gonna count as an “Effect” because thats a component, and the main idea of this project to do 50 experiments on creating multiple effects. but this is a button still lmk what yall think!

8th Effect: Doneee! It is finally ready! See the video (those cards are empty because i didn’t knew what to put inside those :(

Now gonna work on the 9th Effect yayyyy!

8th Effect in progress…. : This will be a simple cards overlapping scroll effect, see the video! It’s almost ready just need to do some finishing touches and optimizations

7th Effect!!!!!!!!!!! (2 effects in a day!): In this effect, the concept is very simple yet entertaining, in this wherever you click an image pops up and then goes away, really nice for a playful site!

6th Effect: This one is a techy loader! For all my linux fans out there!

Effect completed! and also created a repository for the playground, main repository will be added after i complete creating all 50 experiments!

Another effect in progress! gonna finish it tommorow!

Another Effect in! For this experiment, i upgraded the image trail effect i made before (https://bylunar.dev/app/cursor-draw) by adding these things:

1. Inertia & Velocity to each card: adding this was important to make this effect look like you are throwing the images, before it was just spawning hte images based on user’s cursor position but now it also throws it into a that direction with a velocity also!

2. Instead of jsut normal scale up and scale down animation, i added a clip path animation that looks way better!

*Images used are from cosmos.so

Two effects are already created for this project 48 more experiments to go!