Interactive WebGL Experience: Dive into Physics with DIEGETIC

Interactive WebGL Experience: Dive into Physics with DIEGETICInteractive WebGL Experience: Dive into Physics with DIEGETIC

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

RUDRESH H R

• May 16

DIEGETIC — Break The Surface

An experimental WebGL project where the interface is the interaction. A physics-simulated surface fills the screen — drag to tear through it, double-click to trigger a cinematic curtain collapse with air resistance and billowing flutter.

Built with Three.js, Verlet integration physics (9,600+ constraint points), raycaster-driven tearing, real-time shadow mapping, and hand-drawn editorial typography via the Canvas API.

Stack: Three.js · JavaScript · WebGL · Verlet Physics · Canvas API · Space Grotesk

Web Design Frontend Development Web Development three.js JavaScript WebGL javascriptdeveloper

Madob Acharjya

• May 17

Thanks!

RUDRESH H R

• May 16

comments, suggestons, feedback are welcomed😊

Emman Ermitaño

pro

• May 19

Interesting 🔥 Where did you design your preview?

RUDRESH H R

• 1d

Thanks! 🙌 No design tool — the preview IS the project. The whole visual (typography, layout, crosshairs) is generated with code using Canvas API + Three.js. It's a live interactive WebGL experience, not a static design. The tearable surface runs on a custom Verlet physics engine with 9,600+ constraint points 🔥

Emman Ermitaño

pro

• 18h

Cool. I reckon the "tear" effect could still be improved a bit, though it really does feel alive 👍

Stacy · Heed Collective

pro

• May 14

The coming soon page is live ✨ You can now join the waitlist and be among the first to know when it launches

And, because I obviously couldn’t make a normal static coming soon page, you can also play with the effect settings a little

aftrglo.app

Web Design Web Development Unicorn Studio

BrightStudios ®

max

• May 14

Super cool!

BrightStudios®

max

• May 14

New work. Timelaps, from idea to launch.

We worked with Timelaps on the full system: naming, brand strategy and positioning, identity, website design and development, pitch deck.

Each piece briefed the next.

Thanks to Hank and the team for the trust.

Brand Design Web Design brandidentity

Toms Stals

pro

• May 15

looks awesome team! 🙌

Jan Mráz

pro

• May 14

Steal these free Framer components! 💙 1. 3D Image Split Scroll Animation is an excellent choice for immersive scroll-driven experience! 👉 Available in Framer University 2. Kinetic Grid Component is a perfect technique to make your hero section stand out! 👉 Available in Framer University 3. Logo Preloader is a minimalist, elegant component to capture attention from the first moment a visitor lands on your website. 👉 Available in Framer Components Library 🔥Use code JAN to get free month of Framer PRO!