Mohit Tiwari

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!!!!!!!)

I added an easter egg! It changes the site’s theme when user presses Shift + G or clicks the link on thej footer!

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

I finished creating a 404 page as well!

wasted a hell lot of time :heavysob: i tried adding SSG into this existing application to improve SEO but i failed horribly, because the code i wrote is not suitiable for SSR or SSG because i have used window multiple times in the code and in order to now make this code ssr or ssg friendly ill have to guard almost half of my code heavily which is not feasible. i guess ill have to learn next js now. LESSON = Always use Next js if you need SEO.

made the form close when the user clicks outside of the form, and made the content outside the form dim when the form is open, also removed the stagger on the text hover aimation as i didn’t like that much.

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

made the AI talk a bit like human, and also made it remember the whole chat + made the AI talk first and not just respond to the user messages

I DID A LOT OF THING OFFLINE!! BUT NOW FINALLY CREATED THE PROJECT YAYY!

So heres what i have done so far:

• made a simple mobile phone
• The time works according to the user’s local timezone
• Message system is done, AI is intregated, and is fully working!

Now i will be starting on the ACTUAL tasks that are needed to make this game fun!

• i am using hackclub AI for the ai

Site is done!

https://codedbymohit.xyz

Site is done! I am just gonna spend one last day tommorow on this to polish everything!

I forgot to post this devlog yesterday lol, but i completed the site! Now only thing that is remaining is the form and the privcay policy page!

hello, i completed the pricing section today + animated it + also completed the CTA section and animated that aswell! Now i just need to tackle few more bugs that i am encountring in this and complete the form submission flow and also the footer

then we will be ready to launch! I think ill be able to wrap everything up by 2nd January!

did not do much today, but i finalized and polished the fold under animation for fourth section and made it so that it does not break after adding multiple services

this basically uses a formula like baseY * (index of the service card) and baseRotation * (index of th service card) for each service card baseY is -100 and baseRotation is 5degrees

Completed the fourth section as wellll! with that folding under animation for the services!

Completed the testimonials section (aka the wall of love!) and also animated it too!

Made the modal work and made it responsive!

i’ll animate this tommorow!

Made the second section fluid responsive and animated it!

Completed the second section too! gonna animate it tommorow!

Animated the first section too!

WOOOw FIRST SECTION DOONNNE LESS FUCKING GOO! LOOK AT THAT MARQUEE!!!!!

Yess! I made the text fluid responsive and created the secondary button as well!

WOAAHHHHHH WHAT THE HELL I JSUT CREATED LESSS GOO!!!!!

So i was just looking at the sites on awwwards.com then i saw this website -> https://www.ibi.cash/

The text dissolve effect caught my eyes, i thought it will be sooo cool to create it, so i did!!!!!!!

I used this shader from shadertoy to create it along with the cloud type noise for the dissolve effect

The shader: https://www.shadertoy.com/view/3tlXDS

added the texts too! Now ill be creating the second variation of the button, as per the figma design!

Woooho i completed the navbar and menu! here is how it looks! (i was sick for a while so thats why havent done much yet)

Navbar done for desktop! Time to implement the mobile version now!

I have this design ready for my new portfolio! I will put life into this design this winter!