Veyra

Veyra Studio — creative technology

Veyra

We build immersive, art-directed web experiences — and the engine that makes them possible.

Abali, our first showcaseMeet the engine

Not a builder

Not a website builder.Not a template.An engine for websitesthat move.

Veyra owns the hard, reusable parts of creative development — time, motion, scroll, type and light — and leaves the art direction entirely to the project.

The engine

Everything that moves, on one loop.

Veyra Core is a TypeScript engine with zero runtime dependencies. Every demo below is the engine running on this page.

  1. 01

    One frame loop

    Input, scroll, layout, motion and rendering run in ordered phases inside a single requestAnimationFrame. It pauses when you leave, and survives a failing effect.

  2. 02

    Motion with physics

    Seekable timelines for choreography; analytic springs that stay exact at 30 Hz or 240 Hz.

  3. 03

    Scroll as a storyline

    Native scrolling, smoothed — sticky, keyboard, find-in-page and screen readers keep working. Scenes turn position into progress.

  4. 04

    Every script, every direction

    Animate Persian letter by letter and the letters stay joined. Mixed English and Persian keeps its order.

  5. 05

    Adaptive by design

    The engine measures real frame times and adjusts quality and pixel density to the device in your hand.

  6. 06

    WebGL where it matters

    An optional three.js layer on the same loop: a pixel camera, objects anchored to layout, real HTML mirrored into textures.

    Open the experience

New in 0.2

  1. 01horizontal()

    More ways to move.

    Every panel in this row is the new release at work — and so is the row: scroll down and it travels sideways.

    On the Persian and Arabic pages it moves the other way, rightward, so the panels still arrive in reading order.

  2. 02kashida()

    0

    Kashida, the calligrapher’s stretch

    Persian words lengthen where a calligrapher would stretch them: after seen and sheen, then on the last join — never inside lam-alef, never across a zero-width non-joiner.

  3. 03draggable()
    01Throw
    02Catch
    03Resist
    04Snap
    05Step
    06Rest

    Throw it

    Inertia, edges that push back, and snap points that keep the speed of the throw. Arrow keys move one card at a time.

  4. 04flip()

    Layouts that travel

    Change the layout any way you like; every element glides from where it was to where it lands.

  5. 05magnetic() · tilt()
    See the code

    Things that lean in

    Magnetic buttons and tilting cards, on springs. They switch off on touch screens and for reduced motion.

  6. 06scrambleText()

    Decode

    Text settles out of noise in its own script: Persian flickers in Persian letters and stays joined.

  7. 07@veyra/core/glsl

    Noise and light

    Seeded noise for organic motion, and GLSL building blocks — noise, distance fields, OKLab color — for shaders like this one.

Work

Case 001

Abali

«خنکی صدا دارد.» — Cool has a sound.

A Persian, right-to-left campaign concept for Doogh Abali, the carbonated yogurt drink in a glass bottle. Cool has a sound — opening a cold Abali is a handful of them: the opener prying off the crown cap, the gas escaping, the first gulps, the sigh of relief. The film stretches them into a scroll: a bottle rebuilt from photographs of the real one, a cap that snaps off and clatters to the floor, foam that boils over and turns to snow on the mountains around Abali, and a sofreh that fills dish by dish.

Language
Persian, RTL
Built with
Veyra Core + three.js
Assets
All generated live — no photos, no model files
Sound
Synthesized, on by default
Open the experienceSource

An independent, unofficial concept. Not affiliated with the maker of Doogh Abali.

Case 002

Durex

“Annoying, isn’t it?”

An English campaign concept for Durex Invisible, played in zero gravity. It opens with a baby crying, then the punchline. Foil packets drift and knock into each other; one tears open, and the ring unrolls into a sheer sheath you blow up like a balloon — 18 litres is the international standard, about 40 what Durex says a typical one holds. Let it go and it shoots round the page, out one side and back in the other, bouncing off the headlines; tie it, and it follows you to the water test and a sky full of balloons.

Language
English, LTR
Built with
Veyra Core + three.js — no photos, no model files
Physics
Packets that collide; a balloon that bounces off the page’s own headlines
Sound
Natural recordings — it asks before it plays
Open the experienceSource

An independent, unofficial concept. Not commissioned by, affiliated with or endorsed by Reckitt or Durex.

Studio

A studio, an engine, and the work between them.

  1. 01

    The studio

    makes experiences for brands and stories — campaigns, launches, worlds you can scroll through.

  2. 02

    The engine

    is what we keep. Every project returns its best ideas to Veyra Core, in the open.

  3. 03

    The showcases

    are proof: public pieces that push the engine somewhere it hasn’t been.

How we build

Open source

Start with a stage.

Veyra Core is MIT-licensed. Read the guide, run the examples, build something that moves.

Veyra Core on GitHubRead the guide
import {
  createStage,
  horizontal,
  scenePresets,
  splitText,
} from '@veyra/core'

const stage = createStage()        // one loop, smooth native scroll
const title = splitText('h1', { type: 'chars' })

stage.scene('#story', {
  ...scenePresets.pinned,          // pinned with CSS sticky
  timeline: stage.timeline().fromTo(
    title.chars,
    { y: '1em', opacity: 0 },
    { y: '0em', opacity: 1 },
    { stagger: 0.03 },
  ),
})

// Sideways, in reading order (rightward in Persian)
stage.use(horizontal('#gallery', { snap: true }))

Commissions

Something to launch? Let’s make it move.

We design and build art-directed web experiences on Veyra — campaign sites, product launches, stories told in scroll — in English, Persian, Arabic or Turkish. Tell us what you are making.

  • Campaign sites
  • Product launches
  • Stories told in scroll
  • Persian and Arabic, designed — not mirrored
Write to usitsmetti@proton.me