Vladyslav Penev

Creative Engineer (WebGL/Three.js) · Creator of StringTune · Awwwards & Webby Winner

[Vladyslav Penev @penev_tech]

Grid guides inside your browser, but make it absolute control.

No more hardcoded background images or sketchy extensions.
StringDevLayout brings live, editable composition grids directly to your workflow.

• Pick an element -> tweak counts, margins, and gaps live
• Switch breakpoints -> watch grids adapt
• Export settings instantly

https://t.co/tN9o7iTOsL

#StringTune #JavaScript #WebDev #Frontend #Animation #SmoothScrolling #CreativeCoding #DevTools #OpenSource

[StringTune @FD_StringTune]

StringTune – powering smooth scrolling and core web animations.

Links:
↳ https://t.co/krS4BS46M0

#StringTune #WebDev #Frontend #CreativeCoding #Motion #Interaction #Animation #Performance #CSS #WebGL

[awwwards. @awwwards]

Today’s #SOTD goes to https://t.co/sbJojOqmsi Design Agency for "The Obsidian Assembly".

https://t.co/ad2QHumP3M

An independent organization coordinating distributed spaces and product development.

Congratulations! 🏆

#scrolling #gallery #typography

[Vladyslav Penev @penev_tech]

ST3D can now turn an actual <svg> element into a 3D object.
https://t.co/xUsq42Huqp

Which is cool.
But also exactly the kind of feature that needs public abuse testing.

So:
reply with the strangest SVGs you have and try to break it.

Clean icons are useless here.
I want vector crimes.

#threejs #webgpu #web #3d #webdev

[Vladyslav Penev @penev_tech]

Our project, StringTune, has been nominated for The Webby Awards 🏆
It’s a great milestone for the project we’ve been working on for a long time. Public voting for the winners is now open.
I’d be grateful if you could take a minute to vote for our site. It will help StringTune gain more visibility and continue to grow.

👉 Vote here: https://t.co/JjQh6v9ZgN

Thanks for your support!

[CSS Design Awards @cssdesignawards]

Website Of The Day is The Obsidian Assembly
https://t.co/UlXzftKZzN
by https://t.co/PImC0VK3cA Design Agency
#webdesign #webdev #cssdaWOTD #CSSDesignAwards

[Vladyslav Penev @penev_tech]

Typography so hot it actually melts.

Demo: https://t.co/Estqph3BIJ

My new WebGPU experiment Molten Type is live!
Real-time heating, deformation, and procedural sparks.

To my friends on mobile or old browsers: if you see a fallback message, don't be mad. My code is just protecting your device from a literal digital meltdown.

#threejs #webgpu #web #3d #webdev

[awwwards. @awwwards]

New on the Blog: “StringTune: For Core Web Animations” — a Case Study by https://t.co/sbJojOqmsi Design Agency  

https://t.co/ERRrOOA9V6

Discover how https://t.co/sbJojOqmsi built a JavaScript library designed to deliver high-performance, modular web effects.

[Vladyslav Penev @penev_tech]

Decided to kick off a fun little side project: Vacuum Robot Simulator.

Live demo: https://t.co/kwj1OVN69I

Current implemented features:
• Procedural room generation
• Real-time dust clearing with custom WebGL shader
• Battery drain over time + charging docks to refill
• Turbo mode for faster movement at higher battery cost
• Basic dynamic headlight modes that affect visibility
• Simple HUD

Very early WIP — testing the satisfaction of the cleaning mechanic and battery tension. Does the concept feel solid? Any early suggestions for mechanics (e.g. obstacles, power-ups, procedural variations) that could enhance it?

#threejs #webgl #gamedev #wip #webdev

[Vladyslav Penev @penev_tech]

I genuinely love StringTune. For us at https://t.co/rBU0MyHBFb, it’s not just a library we maintain—it’s the backbone we use to keep complex frontends from turning into a mess of imperative JS. We refine it with every single project we ship.

I realized I never actually shared the promo site we built for it. It’s been live for a while, but it’s still the best showcase of how we handle motion: it has to be fast, declarative, and controlled entirely via HTML attributes.

Check the live site: https://t.co/lCppMhp5BB

#stringtune #threejs #web #3d #css #webdev

[Vladyslav Penev @penev_tech]

You are absolutely right. Pre-baked JSON geometry is significantly faster for initialization and completely avoids the CPU overhead of triangulating Bézier curves on the fly.

StringTune-3D is currently in alpha, and I am progressively porting core Three.js features over to this DOM-driven ecosystem. Support for the traditional JSON font format will definitely be added to the pipeline later as a strict optimization option.

Right now, the primary goal of this specific module is to enforce the DOM as the single source of truth by sharing one standard web font asset across both HTML and WebGL. This allows the 3D mesh to instantly adapt to dynamic CMS content without any external conversion steps. Architecturally, this is built for environments like Framer or Webflow cases where the typography is arbitrary and you simply can't pre-bake a JSON file because you don't know what font the user will drop into the visual editor.

[Vladyslav Penev @penev_tech]

Most WebGL text pipelines force you into pre-baked JSON geometry or flat MSDF atlases. For StringTune-3D, I built a different pipeline.

Demo: https://t.co/UNGX0ZavZ1

What you see here has zero imperative Three.js code for layout or animation.

You just drop an HTML attribute on a standard text node. The 3D mesh snaps exactly to the DOM element, fully respecting your existing Flexbox or Grid layout. The DOM stays the strict single source of truth for coordinate mapping, and the text actually remains natively selectable in the browser.

Those per-letter animations are just standard CSS keyframes. They drive CSS variables (like --rotate-y), which the engine reads under the hood and syncs directly to the transformation matrices on every frame.

Instead of faking depth, the engine parses standard web fonts (.woff2, .ttf) on the fly, extracting splines to generate true extruded geometry with bevels.

The engineering tradeoff is obvious: synchronous Bézier triangulation on the CPU during initialization causes a main thread spike, and the polycount is heavy. It will drop frames if you feed it body text. But for hero typography, you get actual physical volume, proper Z-depth, and honest light reflection.

#threejs #web #3d #css #webdev

[Vladyslav Penev @penev_tech]

Built my first @framer component — a Liquid Text effect powered by WebGPU.
https://t.co/6JPiVRfmN6

Curious how it feels on different GPUs — smooth or melting your laptop?

Would love feedback 👀

#webgpu #framer #webdev #web #webgl #glsl #creativecoding

[Vladyslav Penev @penev_tech]

@orcdev StringTune-3D — a declarative approach to 3D in the browser: control primitives, lighting, GLTF models, 3D text, and particles using standard CSS.

https://t.co/v7c6HMgffU

[Vladyslav Penev @penev_tech]

I have this weird hobby: looking at ordinary things through a microscope.

It’s a project I call 'Look Closer'. It's a constant reminder that when you change your perspective, even the most mundane object becomes a complex masterpiece.

https://t.co/ndDUgHR8wf

#LookCloser #TechArt #AbstractArt #VisualArt

[Vladyslav Penev @penev_tech]

@rehanxabdullah @_sameerrr0 Honestly, it’s hard to put a number on it 😅. The process was stretched out because I was developing the site and adding features to the library simultaneously. With all the design changes and R&amp;D, it took a few months total.

[Vladyslav Penev @penev_tech]

@_trish_xD A personal archive for my work. Simple and quiet.
https://t.co/gYLTjHubFY

[Vladyslav Penev @penev_tech]

@rehanxabdullah @_sameerrr0 Nope, that was me 🙈 It’s the official demo for library StringTune. Design by https://t.co/sIBImRdLwU, development by me.

[Vladyslav Penev @penev_tech]

I’m currently building Equation Space — an interactive 3D editor that lets you visualize mathematical formulas in real-time, apply custom GLSL shaders, and animate parameters on the fly.

https://t.co/8pvR9y7472

#threejs #web #3d #webdev

[Vladyslav Penev @penev_tech]

@AwokeKnowing That’s a really fun optimization puzzle. I’ll try prototyping it and see if I can make the transition seamless. Thanks for the idea — I’ll share what I come up with.

[Vladyslav Penev @penev_tech]

Just a quick experiment with procedural grass. Exploring interaction systems using Three.js and WebGPU Compute Shaders.

Live version is up in my Labs.
https://t.co/Fn6BwpMiLU

#threejs #webgpu #web #3d #webdev