VisionByVolt

Building the world

ENTR
Scroll · see my work

Independent design & development studio

A world for everyproject.

I build a concept for your brand from scratch, with its own colour, type and motion, then turn it into a fast, tangible website. Flip the switch: this site takes on the language of the work you choose.

See the workStart a project

Selected work

3 worlds, more on the way

Next world

Three seconds decide it. We design those three seconds.

Redesign proposal

Neuromarketing research agency

Neromark

How it was built

  1. Signal field

    The hero is a line field drawn on a single Three.js plane by a custom shader: three-dimensional ridges of EEG waves. The waves drift on their own, and the scene only renders while it is on screen.

  2. Cursor = gaze

    The cursor behaves like the gaze point of an eye tracker. The signal rises where you look and a heat-red spot forms. On touch screens the gaze travels to targets on the page in automatic saccades.

  3. Fixation trail

    Numbered circles with saccade lines between them sit on top: the look of an eye-tracking report. Not decoration, but the very thing the agency measures.

  4. Reading rhythm

    The headline rises line by line, the manifesto opens word by word with scroll, the method section scrolls sideways on desktop, and numbers count up. All of it shares one easing curve that slows to a stop.

  5. Fallbacks

    The hero entrance is pure CSS, so content shows even if JavaScript fails. With reduced motion on, scenes rest in their final state. The heavy 3D part loads late; content is rendered on the server.

  6. Copy

    Only the existing site's text was reused; nothing from the old design was kept. Everything was drawn from scratch.

A redesign for an agency that measures consumer behaviour with eye tracking and EEG. The site reads like a lab notebook, and visitors feel their own attention being measured.

Signature

A real-time EEG topography in the hero. The cursor is the gaze point: the signal rises where you look, and numbered fixations leave a trail.

Next world

Darkness is light's most expensive material.

Fictional brand · concept

Bespoke tailoring house, Istanbul

Vanta Atelier

How it was built

  1. Figures

    Eight full-length fashion images were generated with AI (Seedream 5 Pro). Their backgrounds were removed with a local model (rembg, birefnet-general) and saved as transparent WebP. They are not real people or a real brand.

  2. Corridor

    The figures are flat planes lined up in depth in Three.js. A custom shader adds fog, exposure that follows distance, and a slight sway. Pieces behind the one in focus fade away on their own, so the text stays clean.

  3. Light

    Behind each figure sits a warm haze and a thin shaft of light from the ceiling. Haze and shaft add together and fade into the fog. There is no outline: the light wraps around the silhouette.

  4. Scroll = camera

    As the page scrolls the camera walks the corridor. Each piece gets a short hold, and its note opens on the side opposite the figure. Dust particles finish the sense of depth.

  5. Typography

    Headings are wide caps, emphasis is italic. Numerals and prices are set in an italic serif. A live Istanbul clock runs in the hero.

  6. Fallbacks

    Without WebGL a CSS poster with a copper-edged pool of light remains. On weak devices the resolution drops and the dust is switched off. Rendering stops while the corridor is off screen.

When the light goes, the cut is what remains: the shoulder line, the lapel, the fall of the cloth. No posing models; eight pieces separate from the fog of a dark corridor in copper light.

Signature

Scroll is the camera. Walking down the corridor, figures emerge from depth and each piece's note opens on the opposite side.

Next world

Every frame is handmade.

Fictional brand · concept

Paper-cut animation studio, Istanbul

Kuklacı

How it was built

  1. Paper layers

    The hero is six sheets of paper lined up in depth in Three.js. Edges are not curves but straight segments, as if cut with scissors. One light makes the layers cast real shadows on each other.

  2. 12 frames

    The scene is drawn 12 times a second and does nothing in between. Each frame the layers move a small amount: a tremble, as if placed again by hand.

  3. Scroll = shutter

    In the walk section the cat moves only when a new frame is shot as the page scrolls. The legs run a four-frame loop and the background layers slide at different speeds.

  4. Scissors scene

    As you scroll, the scissors cut the outline of a gull. The line only grows when a new frame is shot and the scissors open and close every frame. At the end the cut-out bird is lifted from its hole.

  5. Cut edges

    Buttons, cards and section edges are cut with polygon clipping. On hover the paper trembles slightly. No round corners and no soft shadows.

  6. Fallbacks

    Without WebGL, or with reduced motion on, the same layers are shown as a flat paper collage. The scene is only drawn when the frame changes, so it does not tax the device.

  7. Copy

    The brand, the films and the text are fictional; this site is only a design example.

A site for a studio that cuts films by hand and shoots them frame by frame. The page works the same way: motion does not glide, it jumps from frame to frame, and the paper layers cast real shadows.

Signature

Scroll is the shutter. A paper cat crosses the street in twenty-four frames, each one its own step.

Mustafa in a black hoodie and sunglasses, with a black motorcycle behind him.

About me

I'mMustafa.

For five years I've been designing and coding websites. I run the whole process myself, from the first idea to the source code I hand over, so nothing gets lost between design and code: what you see is what you receive. You work with me directly. I listen to what you need, and together we find what will actually work for your business.

Experience
5 years
Field
Web design and development
Setup
Independent, one-person studio

Approach

No templates. From scratch, every time.

  1. Listen

    I learn what the brand does, for whom and why. Words first, pixels later.

  2. Build a world

    A separate concept for every project: palette, type, motion language and one signature idea. Nothing is carried over from the last job.

  3. Make it

    A fast, accessible site built with Next.js, Three.js and GSAP that still impresses on a phone. Nothing ships under Lighthouse 90.

  4. Hand over

    You get clean, documented source code; your team adapts it to its own stack and ships it. Launch and integration can be added as a separate service if you want them.

In the handover kit

  • Source codeA Next.js project with a clean build and pinned dependencies.
  • Handover guideRunning, folder structure and things to watch, in one README.
  • Content and style mapAll copy in one file; colour and type tokens in one place.
  • Licence notesLicences for fonts, images and libraries, listed.
  • FallbacksReduced motion, no-WebGL browsers and low-power devices, documented.

Contact

Let's builda world.

Tell me what you do, who it's for and when the site needs to be ready. I reply within two working days.

Briefly: what you do, what the site should change, timeline.