The Reset
I hadn’t deliberate on making a trend interface. I simply wanted a reboot. On the time, I used to be main artwork route on the studio, juggling a number of initiatives, 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 be taught Webflow. I needed to discover GSAP. However greater than that, I needed to create one thing unapologetically bizarre and delightful.
That seed grew into DICH™, Design Unbiased Artistic Home. What began as a design playground turned a press release.
Designing the Unfuturistic Future
We made a acutely aware resolution: no darkish mode. No glitch filters. Most futuristic UIs really feel chilly. We needed heat, softness, a imaginative and prescient of the long run that’s poetic, not artificial.
Every part had its personal visible temperature. Comfortable 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 stream.
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 consumer 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,
length: 0.25,
onComplete: () => preloaderBlack.type.show = "none"
});
// Animate entry strains
gsap.fromTo(line, { width: 0 }, {
width: '100%',
length: 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 mirror 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 consumer’s cursor.
At first, we used .fbx.
Large mistake. The file was huge. FPS dropped. Reminiscence exploded. We tried simplifying textures, eradicating mild bounces, optimizing geometry — no cube.
Then somebody on the crew mentioned, “What if it’s the format?”
We re-exported in .gbl and immediately it labored. Gentle. Quick. Fluid.
Body That Doesn’t Break
One large problem: an ornamental body that scales on each display with out distortion. SVG alone stretched in bizarre methods.
Our resolution:
- Break up every edge into its personal div or SVG
- Use
absolutepositioning - Use
vw/vhfor SVG scaling,emfor 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% {
remodel: translateX(0);
}
100% {
remodel: translateX(-100%);
}
}
}Cursor Coordinates
Reside 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 related 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 turned a vibe.
We used Unicorn Studio to create customized cursor trails and animations that adopted the consumer like echoes of intent. Three variations in complete:
- One for the touchdown display — minimal, hypnotic.
- One for the undertaking case research — 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 instrument. 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 comes, however none labored as we’d hoped or produced outcomes that have been sufficiently readable — till we discovered an previous 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. Exhausting.
- Each visible block was lazy-loaded utilizing
IntersectionObserver - Safari compatibility points — reworked unsupported animations for Safari and added fallbacks for AVIF pictures (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 pictures = el.querySelectorAll('img[data-src]');
pictures.forEach((img) => (img.src = img.dataset.src));
observer.unobserve(el);
}
});
});404, However Make It Style
Most 404 pages apologize. Ours seduced.
We handled the error web page like a runway — not a dead-end, however an invite. As an alternative of a tragic emoji or a bland “web page not discovered,” you get a full-screen glitch-dream: warped typography, delicate scans, and a single message that sparkles like a reminiscence.
Technically, it was easy — a standalone Webflow web page. However visually, it prolonged the DICH world: similar typographic pressure, similar surreal softness. We even debated including background audio, however silence gained — it made the web page really feel like a second suspended in time.
What We Discovered
- File codecs matter greater than you suppose
- Glitches aren’t as magical as considerate movement
- GSAP is our greatest buddy
- Webflow is highly effective when paired with code
- You don’t want an enormous plan to make one thing that issues
Closing
I virtually gave up. Greater than as soon as. However each time the crew 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.
Credit
Creation Course: BL/S®
Artwork / Artistic Director: Serhii Polyvanyi
Webflow Designer: Ihor Romankov
Assist Developer: Kirill Trachuk
PM: Julia Nikitenko
Designed and constructed with Webflow, GSAP, Spline, AE, and probably an excessive amount of espresso.
