I'm adeveloper.

Petja Klass, black-and-white portrait against a concrete wall — Print 01

[ 01 — Who I am ]

I build websites and web apps. And I don't stop until they feel right.

Hi, I'm Petja. Nice of you to scroll this far.

Petja on a bicycle, holding an OK sign in front of one eye — Print 02

In 2023 all I wanted was a website for my photos. That one website became a passion, and the passion became a studio. I've lived in Nuremberg since 2024. I've got the hang of the bratwurst. The dialect, not yet.

I'm the one who looks at a finished page and says: there's more in this. It's mildly annoying, briefly, and usually worth it. In return you get straight answers instead of agency speak, and now and then an idea that sounds daft at first and then works. See below.

Based in: Nuremberg
Websites: since 2023
Studio: VYRNOX
Languages: German · English

[ 02 — Disciplines ]

What I do.

Interfaces that feel calm and are clear to use. Typography first, everything else after.
- Figma
- Typography
- Design systems
- Accessibility
Websites and web apps with Next.js, React and TypeScript. Fast, robust and easy to look after.
- Next.js
- React
- TypeScript
- Node.js
- Supabase
- Vercel
Motion with weight and a reason: scroll stories, transitions, micro-interactions.
- GSAP
- ScrollTrigger
- Lenis
- CSS
Real-time 3D and custom shaders, when an idea needs more than a flat surface.
- three.js
- R3F
- GLSL
- Blender
Workflows that run themselves: forms, notifications, integrations.
- n8n
- Webhooks
- APIs

demo — designlive

Ä Ö Ü ß „ “ → 0 1 2 3

opsz 7212 columns · 24 px baseline

// Screen → paper: the homography behind the printfunction squareToQuad(q: Quad): number[] {  const [x0, y0, x1, y1, x2, y2, x3, y3] = q;  const sx = x0 - x1 + x2 - x3;  const sy = y0 - y1 + y2 - y3;  const dx1 = x1 - x2, dx2 = x3 - x2;  const dy1 = y1 - y2, dy2 = y3 - y2;  const den = dx1 * dy2 - dx2 * dy1;  const flat = Math.abs(sx) + Math.abs(sy) < 1e-9;  const g = flat ? 0 : (sx * dy2 - dx2 * sy) / den;  const h = flat ? 0 : (dx1 * sy - sx * dy1) / den;  return [x1 - x0 + g * x1, x3 - x0 + h * x3, x0,    y1 - y0 + g * y1, y3 - y0 + h * y3, y0, g, h, 1];}

Newsreader · variable · wght 220–760runs in your browser

[ 03 — Work ]

What I've built.

01VYRNOXConcept · Design · 3D · Development2026
02Handyshop NürnbergWebsiteCase study to follow
03KumoWebsiteIn development

[ 04 — Process ]

From latent image to finished page.

Bath 011:30
Developer
Concept & design
An idea becomes an image: structure, typography, motion. Understand first, then build.
Bath 020:30
Stop bath
Reduction
This is where we decide what stays. Better left out than mediocre.
Bath 035:00
Fixer
Build & test
Code that holds: fast, accessible, tested on every device.
Bath 0410:00
Wash
Launch & care
Go live, measure, refine. So it still feels right a year from now.

[ 05 — Why VYRNOX ]

Everyone deserves an exceptional website. At a fair price.

vyrnox.de

That's why I founded VYRNOX, my studio for web, brand & motion. Projects there come with fixed prices and clear processes.

This site shows who's behind it. If you have a project, that's where it continues.

[ 06 — Contact ]

Write to me.

For a question, an idea or just because. I read everything myself.

hello@petjaklass.dev