DField Lab

No clicking between pages. Built a scroll-driven story site. As you scroll, the character's full arc plays out start to finish, like watching a film.

• 01User surface

  The whole experience the user sees

  This frame shows the live product: a creative microsite that reads as one character's journey · no traditional page transitions. Every component is ours · scope, design, code, deploy.

• 02Stack behind the screen

  What's powering it: Next.js, JavaScript

  2 stack components run behind this frame · Next.js, JavaScript drive the visible UI; the rest sit in the data layer. All studio-owned.

• 03What we shipped

  Continuous animated page transitions

  Visitors follow the whole story to the end

• 04Status

  Private deploy · under NDA.

  Per the client's request the URL stays private · the build, architecture, and lessons can be shared in a scoping call.

• 01 · BRIEF

  Land the visual register before any layout.

  Storyboarded the journey first · sections were chapters, not pages. A character anchors continuity; the visitor follows them rather than 'navigating'.

• 02 · ARCHITECTURE

  Stack decisions before any code.

  Decision doc captured the data flow, Next.js, JavaScript role split, and the failure modes we'd handle in v1 vs defer. Boundaries with the customer's existing infra were pinned so the deploy didn't surprise their ops team.

• 02 · BUILD

  Scroll-bound scenes on Next.js.

  Each chapter is a scene with its own motion vocabulary; transitions between them happen on scroll progress, not on route change. Asset pipeline is dimensioned around 60fps on commodity hardware.

• 04 · POLISH

  Performance, accessibility, and observability.

  PSI / a11y / coverage budgets enforced as launch gates. Logging + metrics wired before cut-over · the team can answer 'is it working?' from a dashboard, not a Slack thread. Threat-model checklist signed off before traffic hits the box.

• 03 · SHIP

  Visitors finish the story.

  Time-on-page numbers reflect the engagement · the brand owns a visual register no Hungarian competitor can replicate without rebuilding the engine.

• 01Narrative

  One character anchors the journey

  Continuity device replaces the chrome a typical site uses (nav, breadcrumbs) · it's a story, not a sitemap.

• 02Motion

  Scroll-bound scenes, 60fps target

  Each scene's motion is bound to scroll progress · no autoplay, no theatrical hero loops.

• 03Pipeline

  Asset pipeline sized for commodity hardware

  WebP + manifest-driven preloads keep the LCP fast even with the heavier-than-usual scene assets.

• 04Niche

  NFT-tier polish in a marketing-site context

  Visual register comes from the NFT-launch playbook · no other Hungarian agency had used it for a brand site this way at the time.

• 
  01Frame

  Lab entrance · neon door + testimonials + EU cert

  Visitor lands at an illustrated cyberpunk lab door (neon 'USEAIEASILY LAB' sign). Floating panels carry 5-star testimonials (Júlio Reyes Castro, Kristóf, Joran, Jerzso) + 'EU által tanúsítva' compliance card · authority + atmosphere in one frame.

• 
  02Frame

  Lab interior · 4 service nodes + open product modal

  Inside the lab, four glowing service nodes line the left wall (Termékfejlesztés / AI rendszerek / AI workshopok / Biztonság). Hovering 'Termék' opens a 'Working products' modal with the engagement deliverables, weekly schedule, and CTA · interactive walkthrough, not a brochure.

• 
  03Frame

  Atmospheric beat · between scenes

  Between content beats, the camera pans to a quiet wall: an empty teal-glowing frame, a cracked mirror, broken concrete · the world stays consistent, the visitor is still inside the same story instead of jumping back to a 'normal' webpage.

• 
  04Frame

  Control room · the build station

  A character sits at a triple-monitor workstation with a floating geometric AI symbol overhead · the operator persona inside the lab. Establishes 'humans + AI in the loop' as the actual studio practice, not a slogan.