Interactive Asteroid-to-Star Journey with Three.js and GLSL Shaders

Interactive Asteroid-to-Star Journey with Three.js and GLSL ShadersInteractive Asteroid-to-Star Journey with Three.js and GLSL Shaders

The network for creativity

Join 1.25M professional creatives like you

Connect with clients, get discovered, and run your business 100% commission-free

Creatives on Contra have earned over $150M and we are just getting started

Back to feedPost

Mariusz Mitkow

• 1d

Hi :) This is a journey through asteroids into the heart of a star. Built with Three.js, React Three Fiber, and custom GLSL shaders. Liquid images, interactive particle typography, and a core that opens under your cursor.

Completed work

Interactive Design Motion Design Web Development three.js Figma Spline

MD Robin Islam

pro

• 1d

Amazinggg work

Mariusz Mitkow

• 1d

Thanks !

Kaushal Bodar

• 1d

Nailed it!

Mariusz Mitkow

• 1d

🙌

Rahul Upadhyay

pro

• 1d

Man... this is cool. 😍

Mariusz Mitkow

• 1d

Thanks !

Nicolette .

• 1d

this is so neat!

Nazar Koliano

pro

• 1d

wow

Dim Pixidimworld

• 1d

Lovely

Devansh singh

• 10h

absolute master !

Ergin K

pro

• 5h

The core opening up under the cursor is a great payoff at the end of the journey. How do you keep the custom shaders and particle typography smooth on lower-end phones? Scaling the particle count per device, or one quality level for everyone?

Kristaps Reinfelds

• 1h

Great, as always buddy 😉

Umar Farooq

• 1h

Amazing

Saif Mohammed

• Oct 2

A hand-built studio site in a Swiss "lacquer & stone" style: warm stone paper, lacquer-red accents, thin uppercase type and fine film grain. Every section reacts as you scroll: Halftone portrait that reveals under your cursor

Signature that draws itself, and a manifesto that lights up word by word

The boutique: five project videos with a working till. Reach the end and the receipt prints PAID

3D paper crumple: the receipt folds into a real 3D ball and drops into the page with physics

"A Day in Code": an original stick-figure film drawn in code. The ball lands inside it and gets a bicycle kick

Generative synth music and cartoon sound effects, all made live in the browser

AI-style assistant in a glowing WebGL orb, available in six languages

Built with: Vanilla JavaScript · Vite · GSAP + ScrollTrigger · Lenis smooth scroll · Three.js (3D crumple and cart) · Matter.js (physics) · WebGL shaders · Web Audio API · Web Workers · Vercel

The 3D crumple runs in a Web Worker and only the video on screen plays, so it stays smooth at 60fps.

🔗 saif-developments.vercel.app

Web Development Web Design three.js GSAP

Dim Pixidimworld

• Oct 2

This is nice 👌

Gabor Molnar

pro

• Oct 2

Archive Friday 💿 Such a shame this concept never made it into production—still one of my favorite explorations. Industry: health/sleep tracking

Completed work

unicornstudio Contra Mobile Design Motion Design Unicorn Studio

Sahil Sharma

pro

• Oct 5

nice designs

Huehaus Studio

pro

• Oct 2

Mosaic: Curated Web Design Gallery

Mosaic is an internal Huehaus project: a gallery that features one standout website a day. We built it because we spend a lot of time looking for good references and wanted a place that only showed work we'd actually recommend. Every site is picked by hand.

The site is built in Framer. The layout is a simple grid that stays out of the way, with filters for 18 categories like Agency, Bold Type, Editorial, Minimal, and Dark Mode, so you can get from browsing to a specific reference quickly.

Outcome: Mosaic is live and updated daily. It gives designers a reliable place to find references and gives Huehaus a presence in the design community, while showing what we can build in Framer. It's one of the original 128 sites featured in Framer Gallery.

Completed work