Playground.
Small things I built for this site because they were fun to build. Everything runs right in your browser, so go ahead and break them.
YEABSIRA
Cut a name
Type any name, then drag across the letters to slice them. Throw the pieces around; they find their way home.
How it works
Each letter is drawn into a texture and traced into a shape. Your cut splits that shape along the line, the halves fall with real physics, and a moment later they fly back. The ripple under your pointer is a small simulation running on your graphics card.
Draw a line across it to cut itGrab a piece. It mends itself.The cutting needs a device with a bit more power, so these are pictures
Glass jelly
The glass device from the top of my site. Draw a line through it and it turns to jelly. Tap it to change shape.
How it works
The shape is a soft body: a mesh of points held together like jelly and solved many times every frame. Three.js draws it as glass, and the cut runs through the mesh the way a knife would.
Yeabsira Tarekegn
Builds websites and phone apps
- Based in
- Addis Ababa, Ethiopia
- Coding since
- 2020
Grab the badge and give it a swing. Flip it for my CV.
A badge on a string
Grab it and give it a swing, or flip it over.
How it works
A pendulum in plain JavaScript: gravity, a little friction, and your pointer as the hand that swings it. The flip is CSS in 3D, no libraries.
More land here as I make them. Curious how the rest works? How this site was made, orback to the site.