Artycoders

Artycoders | Digital Atelier High-end web design & digital experiences for premium brands. ⚡️ Desirability + Close-thinking. 🎁 Monthly: 4 Free Vision Concepts.

[Artycoders @artycoders]

It's a real mass-spring simulation, a grid of particles connected by three kinds of constraints - structural for neighbors, shear for diagonals, and bending for stiffness. The top row is pinned, and each frame runs a few relaxation passes so the cloth holds its shape. Dragging and falling are just toggling pins and letting the sim run.

[Artycoders @artycoders]

Three.js slider experiment.

Each slide is rendered onto a simulated cloth mesh with particle-based fabric physics.
Slides fall, unfold, and behave like real fabric — while still working as a clickable UI.

@threejs

[Artycoders @artycoders]

@doni_wawa @LuisBizarro @threejs Yes, we'll be launching a Patreon page soon with templates for all the animations and detailed instructions. Send us a DM, and we'll set you up with an early bird discount.

[Artycoders @artycoders]

Not quite, there іs no HTML involved. The whole slide UI is painted with the Canvas 2D API - text, glass panels, buttons, everything, and that canvas is used as the texture on a verlet-simulated cloth mesh in three.js. Clicks work by raycasting onto the cloth and mapping the UV back to canvas coordinates against hit-rects I record during the draw pass.

[Artycoders @artycoders]

@OtanoStudio @threejs Yes!

[Artycoders @artycoders]

Client: we just need a simple lawn care website.

Budget: a sandwich and “future opportunities”

Us: say no more.

Built with @threejs, @webflow, @greensock.

Try it here:
https://t.co/FKIRmquV7n

[Artycoders @artycoders]

Interactive vinyl store concept.

A holographic sticker that can be dragged and applied to any product — with instant price recalculation.

made with @greensock , @webflow

[Artycoders @artycoders]

A soft 3D flower visualization

@Blender @webflow

[Artycoders @artycoders]

WebGL slider experiment
@threejs @webflow

[Artycoders @artycoders]

Naya Studio — first screens.
Take a look at this blooming stone.

[Artycoders @artycoders]

@anton_skv @webflow @greensock Thank you, Anton! We took a slightly simpler approach here than you did. We generated a few key frames and animated them in AI. Then we fine-tuned them in After Effects and re-encoded the video for smooth scrolling, the color changes using the hue-rotate parameter.

[Artycoders @artycoders]

Saw a beautiful animation concept for a Ford Mustang by @anton_skv .
It inspired us to explore a similar idea — but applied to a yacht experience.
We took the concept further and built a fully interactive version in @webflow , animated on scroll with @greensock .

[Artycoders @artycoders]

@gustavwf @greensock @webflow Thank you!

[Artycoders @artycoders]

Text division animation on scroll

made with @greensock @webflow

[Artycoders @artycoders]

Experimenting with a trending metal-texture button

Soon we’ll publish a detailed guide and template on our Patreon.

Subscribe so you don’t miss it.

@threejs @webflow

[Artycoders @artycoders]

One of the small details we loved building for Naya Studio website: the preloader.

[Save Design @SaveDesignHQ]

We found some playful, unusual buttons to show you. So many tiny details to click around.
Notice the page transitions. So cool! From @artycoders 💥

[Artycoders @artycoders]

Our work has been nominated for Website of the Month. Thank you, jury!

[CSS Design Awards @cssdesignawards]

Presenting the nominees of the Website of the Month for February!
https://t.co/hgzB2FKlnF
View the best WOTD winning sites of February and stay tuned for the decision of the Judging Panel.
#webdesign #webdev #webawards #cssdaWOTM #CSSDesignAwards

[Artycoders @artycoders]

Soon, we won’t remember
what it looked like.
Refuse the wrap.

(Sound on)

@WWF @greenpeace

made with @threejs