DICH™ Vogue: A New Period of Futuristic Vogue

The Reset

I hadn’t deliberate on making a style interface. I simply wanted a reboot. On the time, I used to be main artwork route on the studio, juggling a number of tasks, and emotionally, I used to be merely exhausted. I joined an Awwwards Masterclass to rediscover the enjoyment of taking part in with design. I needed to study Webflow. I needed to discover GSAP. However greater than that, I needed to create one thing unapologetically bizarre and exquisite.

That seed grew into DICH™, Design Unbiased Artistic Home. What began as a design playground grew to become an announcement.

Designing the Unfuturistic Future

We made a aware choice: no darkish mode. No glitch filters. Most futuristic UIs really feel chilly. We needed heat, softness, a imaginative and prescient of the longer term that’s poetic, not artificial.

Every part had its personal visible temperature. Gentle gradients, air, pastel mud. Typography was essential. The T-12 font had these unusual numeric ligatures that felt alien however elegant. Video, coloration, typography — all talking the identical language.

We constructed moodboards, UX pillars, and rhythm plans. That course of, taught within the Masterclass, modified how we approached structure. It wasn’t about grids. It was about circulation.

Constructing the Entry Ritual (Preloader)

The preloader wasn’t simply an aesthetic flex. It solved three key issues:

Our media-heavy website wanted time to load
Browsers block autoplaying audio with out person interplay
We needed to introduce temper and rhythm earlier than the scroll even started

It was animated in After Results and exported to Lottie, then embedded into Webflow and animated utilizing GSAP.

The Enter button additionally triggered sound. It was our “permission level” for browser playback.

// Fade out overlay
gsap.to(preloaderBlack, {
  opacity: 0,
  period: 0.25,
  onComplete: () => preloaderBlack.model.show = "none"
});

// Animate entry strains
gsap.fromTo(line, { width: 0 }, {
  width: '100%',
  period: 1.25,
  delay: 1,
  ease: 'power2.out'
});

// Present enter button
gsap.delayedCall(5.25, () => {
  preloaderEnterButton.classList.add('is-active');
});

Part-Conscious Navigation

We needed the navigation to really feel alive, to replicate the place you have been on the web page.

So we constructed a scroll-aware part indicator that up to date with a scramble impact. It modified dynamically utilizing this script:

const updateIndicator = (newTitle) => {
  if (newTitle !== currentSection) {
    currentSection = newTitle;
    indicator.setAttribute('data-text', newTitle);
    scrambleAnimate(indicator, newTitle, false);
  }
};

The Monster That Adopted You

We modeled a monster in Blender, with arms, eyes, and floaty weirdness, then exported it to Spline. We needed it to comply with the person’s cursor.

At first, we used .fbx.

Big mistake. The file was huge. FPS dropped. Reminiscence exploded. We tried simplifying textures, eradicating mild bounces, optimizing geometry — no cube.

Then somebody on the workforce stated, “What if it’s the format?”

We re-exported in .gbl and immediately it labored. Gentle. Quick. Fluid.

Body That Doesn’t Break

One massive problem: an ornamental body that scales on each display screen with out distortion. SVG alone stretched in bizarre methods.

Our resolution:

Break up every edge into its personal div or SVG
Use absolute positioning
Use vw/vh for SVG scaling, em for div spacing

@media (min-width: 992px) {
  .marquee-css {
    show: flex;
    overflow: hidden;
  }
  .marquee_element {
    white-space: nowrap;
    animation: marquee-horizontal 40s linear infinite;
  }
  @keyframes marquee-horizontal {
    0% {
      rework: translateX(0);
    }
    100% {
      rework: translateX(-100%);
    }
  }
}

Cursor Coordinates

Stay coordinate HUD beneath the cursor — completely suited to our website’s theme, so we determined to incorporate it.

doc.addEventListener('DOMContentLoaded', perform () {
  if (window.innerWidth <= 768) return;
  const xCoord = doc.getElementById('x-coordinate');
  const yCoord = doc.getElementById('y-coordinate');
  let mouseX = 0;
  let mouseY = 0;
  let lastX = -1;
  let lastY = -1;
  let ticking = false;
  perform formatNumber(num) {
    return num.toString().padStart(4, '0');
  }
  perform updateCoordinates() {
    if (mouseX !== lastX || mouseY !== lastY) {
      xCoord.textContent = formatNumber(mouseX % 10000);
      yCoord.textContent = formatNumber(mouseY % 10000);
      lastX = mouseX;
      lastY = mouseY;
    }
    ticking = false;
  }
  doc.addEventListener('mousemove', (occasion) => {
    mouseX = occasion.clientX;
    mouseY = occasion.clientY;
    if (!ticking) {
      ticking = true;
      requestAnimationFrame(updateCoordinates);
    }
  });
});

Stones That Scroll

We positioned a 3D stone (additionally from Blender) into Spline, gave it orbital movement, and linked it to scroll utilizing Webflow Interactions.

It felt like movement with gravity — guided, but natural.

Pixel Tracer

With coordinate monitoring already in place, we simply utilized it to our part and later enhanced it with a pixel tracer impressed by Jean Mazouni’s displacement impact.

Unicorn In all places

The cursor wasn’t only a pointer, it grew to become a vibe.

We used Unicorn Studio to create customized cursor trails and animations that adopted the person like echoes of intent. Three variations in complete:

One for the touchdown display screen — minimal, hypnotic.
One for the mission case examine — denser, electrical.
One for transitions — barely-there glimmer, like a reminiscence.

Every model added pressure and curiosity. It wasn’t flashy for the sake of it — it gave rhythm to hovering, a pulse to the interplay. Instantly, the cursor wasn’t only a software. It was a part of the interface’s voice.

Footer Letters with Physics

Our footer was a private second. We needed the phrase “DICH” to be hidden inside animated strains and revealed on hover utilizing canvas and brightness sampling.

This one took the longest. We tried Perlin noise, sine curves, and is derived, however none labored as we’d hoped or produced outcomes that have been sufficiently readable — till we discovered an outdated Domestika course that confirmed getImageData() logic.

const typeData = typeContext.getImageData(0, 0, typeCanvasWidth, typeCanvasHeight).information;

For the smoothness of the strains we gave up straight cuts and switched to quadratic curves:

context.quadraticCurveTo(prev.x, prev.y, (prev.x+curr.x)/2, (prev.y+curr.y)/2);

Lazy Load + Safari Nightmares

We needed to optimize. Laborious.

Each visible block was lazy-loaded utilizing IntersectionObserver
Safari compatibility points — reworked unsupported animations for Safari and added fallbacks for AVIF photos (even lighter than WebP) to maximise optimization.
Heavy sections solely rendered after the preloader completed

const io = new IntersectionObserver((entries) => {
  entries.forEach((entry) => {
    if (entry.isIntersecting) {
      const el = entry.goal;
      el.classList.add('energetic');
      const photos = el.querySelectorAll('img[data-src]');
      photos.forEach((img) => (img.src = img.dataset.src));
      observer.unobserve(el);
    }
  });
});

404, However Make It Vogue

Most 404 pages apologize. Ours seduced.

We handled the error web page like a runway — not a dead-end, however an invite. As a substitute of a tragic emoji or a bland “web page not discovered,” you get a full-screen glitch-dream: warped typography, smooth scans, and a single message that glints like a reminiscence.

Technically, it was easy — a standalone Webflow web page. However visually, it prolonged the DICH world: identical typographic pressure, identical surreal softness. We even debated including background audio, however silence received — it made the web page really feel like a second suspended in time.

What We Realized

File codecs matter greater than you suppose
Glitches aren’t as magical as considerate movement
GSAP is our greatest good friend
Webflow is highly effective when paired with code
You don’t want a giant plan to make one thing that issues

Closing

I nearly gave up. Greater than as soon as. However each time the workforce cracked a bug, designed a transition, or made a visible weirder — it jogged my memory why we construct.

DICH™ was a problem, a love letter, and a reset. And now it’s yours to discover.

Go to the DICH™ website