dither shader everywhere / grain
swiss design as the main design system which we might include a chaos part that will use neobrutalist instead, showind diversity in 3d web design
there should be a wireframed skyscraper that comes with an animation, this should be a 3d model and it comes from top to bottom with its lines, solid and skinny lines when hovered over, it becomes an actual skyscraper with grain, and then collapses back into wireframe when not hovered.
for the website loader, our logo comes only showing minimalism, the main text should be for the website below the 3d model or to both sides of it similar to: https://srg.ava-digital.site/en
the skyscraper should look like Merdeka 118 and the loader should be cream colors that opens up to the main page which is white or near white from top to bottom.
the background can be a randomly dithering pattern that adds subtle texture without distracting from the main content, should be very light, it should be a 3d scene but the background doesnt necessarily have to be 3d, when the mouse moves the skyscraper, and all other text should follow a parralax effect
no solely scroll based animations everything must be smooth and the scroll should be infinite, so goes back to top or bottom, there should be a projects part where there is a hand of some form, a wireframed hand, the same type of thing all grayscale, with a subtle grain overlay to maintain the dither shader aesthetic throughout. and the hand shows some projects when hovered over, revealing project details in a clean, minimalistic popover, this hand or finger should follow the user, the hand can be similar to mickey mouse.
we need an effect and hover close to this but light mode instead and should look more swiss design style, the parralaz effect is invaluable to the overall experience since it adds depth and interactivity without overwhelming the minimalist aesthetic.
there should be sound and sound design as well check the igloo case studt to learn more, also should have a custom cursor etc of course, a mono font + a very clean sans font should be used for all text elements, mono for small items and clean sans should actually be clean and more modern than inter, probably geometric. btw you should follow all neobrutalist / dither / grain / most importantly the swiss design style across the entire app
## Igloo Inc: Case Study
Our friends at Bureaux proposed a collaboration to create the landing page for Igloo Inc., the parent company of Pudgy Penguins.
The main objective of this project was to highlight the company's various portfolio projects using a scrollable and user-friendly navigation, all while making sure the design was visually appealing and consistent with the brand's guidelines.
Given that the landing page would have just three sections, we quickly realised that one of our biggest challenges would be creating a scrolling experience that kept users engaged, incorporating plenty of interesting interactive elements.
## Process
After Bureaux supplied us with moodboards to set the tone and style, some of their own renders and 3D assets, and a general outline of the site’s content, we began designing our first concept.
At this stage, we prefer using grey mockups and sketches to communicate our ideas. The focus here is on mapping out the user journey, along with key interactions and navigation elements.
For sections that are difficult to communicate with static mocks alone, we create simple “previs” animations. These are quick, untextured renders designed to clarify our ideas and get everyone on the same page before we dive into execution.
## Design
Since our team is made up of technical artists, our next step is to start working on both the code and 3D art simultaneously, directly in the browser.
We have custom tools that make it possible to update changes to shaders, textures, and models in real time. This approach allows us to iterate quickly, explore various options, and determine what works best for each element.
> “Iterating directly in the browser makes it easier to explore options and prototype effects, often leading to better results.”
Another advantage of working directly in the browser is that we can continuously measure performance during development, making adjustments as needed to ensure smooth navigation on low-end devices.
The transition between scenes uses a mix of chromatic aberration, tech displacement and frost effect.
While experimenting with scene transition effects in the build, we discovered that chromatic aberration aligned perfectly with the aesthetic we aimed to achieve, so we decided to incorporate it into a few elements and materials.
## Animation
An early concern was that opening the site on an outdoor scene might not align with the future-forward tone of the brand. To make sure we were hitting the correct tone from the very beginning, we decided to inject some additional tech vibes with an intro animation.
The intro animation is rendered in real-time, and flows seamlessly into the rest of the experience.
The sequence was animated in-engine using a combination of code and custom shaders. In addition to keeping file size down, this real-time approach helped us maintain a consistent visual style across the site, and allowed us to immediately make edits without needing to wait for any expensive renders to complete.
## Ice Blocks
Each project was represented by an object encased in ice.
Our original plan was to use the same ice block for each project. However, during prototyping, we quickly realised that the projects looked too similar to each other when scrolling past. To add some variation, we decided to create a unique ice block design for each.
To scale this, we wrote a custom algorithm that mimicked the growth of ice crystals inside a container.
> "Procedural approaches need to be chosen carefully, since setting them up can take a significant amount of time."
## Interactive Particles
For the links section, we chose to create an interactive particle simulation that would form different models based on the selected external link.
We developed a custom exporter that converts VDB data into a browser-friendly format, with compression for smaller file size.
Particles change colour based on their speed and glow as they form new shapes, paired with sound effects for feedback.
## UI Design
We implemented the UI using WebGL to unlock performance-heavy effects:
- Glitches via shaders
- Text scramble without layout recalculation
> "Implementing UI in WebGL can unlock a range of high-performance effects."
## Technologies & Tools
- 3D and textures: Houdini, Blender
- UI design: Figma, Photoshop, Affinity Photo
- Programming: Three.js, GSAP, Svelte, Vite
- Sound: Davinci Resolve
We prioritize performance, custom tooling, and minimal load times by controlling geometry export, shader compilation, and texture loading strategies.
---
Abeto is a small, specialised team of technical artists creating interactive web experiences and games.
https://4wide.jp/ https://ascendmarketing.xyz/ https://srg.ava-digital.site/en
and a photos etc page as well, mainly wireframed for all, thats our design
and there should be some 2d items like these which are actually 3d items as well, as i told you, mouse’s current place should determine all text geometry etc
