A comprehensive breakdown of the site architecture, design systems, and interactive elements that power the ddi brand experience.
The header establishes the ddi brand identity through carefully crafted interactive elements. Each component serves a dual purpose—functional navigation and brand reinforcement.
The logo features lowercase initials forming an infinity symbol from the "dd" letters. It floats asynchronously, with transparent spaces revealing content as users scroll.
An abstract representation of the logo—three elements each representing a letter of the ddi brand. Creates visual continuity with the main identity.
Dalí-inspired warped letter pill box with dripping elements. Hover reveals color variation, click response blends both states.
Porcelain mechanical high-end contraption aesthetic. Hover triggers colorsplash, click creates press-down mechanical response.
Purely aesthetic bouncing dot animation. The dot squishes on contact with the base and responds to multiple click interactions.
The main visual statement combining terminal aesthetics with 3D transformation and particle systems.
A blinking terminal cursor types out the title in pixelated font. The text responds to cursor movement, affecting individual pixels. After typing completes, letters explode and pivot through 3D space across the screen.
Pixels can be knocked around by cursor interaction before the infinite loop restarts. The banner animation cycles endlessly.
Variable pixel squares burst from the cursor with each movement. Terminal green variations with variable transparency create subtle visual interest.
Achieved through masked video transparency with carefully timed compositing to eliminate model contradictions.
The services section presents offerings through interactive cards with a retro-modern aesthetic.
Tasteful retro-modern boxes featuring animated title elements. The background presents appearing vertical stripes moving up and down, creating a digital atmosphere over the pale transparent surface.
A dynamic skills showcase featuring physics-based animation and layered visual depth.
A modern rounded rectangle containing all skills. Apple-like physics enable natural movement with cartoon-style pill box animations.
A chubby, short bubble floating below and atop the carousel, enhancing 3D depth perception. Contains two glowing green chips floating inside. Text responds to mouse movement and can be pulled/released for responsive shake effects.
A carousel of exploration showcasing past projects with rich interaction and iPhone-like physics.
| # | Case Design | Demo |
|---|---|---|
| 01 |
AffsMedia
Transparent logo with stock laptop featuring superimposed company website. Transparent background reveals the 3D carousel behind while maintaining foreground image elements.
|
|
| 02 |
Kaiser Permanente
Stock doctor image combined with company logo on transparent background. Features detailed popup with additional information.
|
|
| 03 |
Application Development
Stock iPhone image with enhanced transparency background matching carousel styling.
|
|
| 04 |
Cognizence
Multi-device stock image (desktop, laptop, phone) with enhanced transparency. Popup features video layers showing independent website interactions across devices without element overlap.
|
|
| 05 |
Commercial Production
Abstract painting with manipulated transparent layers. Popup features video production segment.
|
|
| 06 |
Michael "The Grinder" Mizrachi
Slideshow of grinder products with transparent backgrounds, featuring color-blending variations. Magazine shot with custom background. Inner card features Grinder Coin video.
|
|
| 07 |
Muze Art
Front card video plays from all carousel directions and behind, creating immersive visual experience.
|
|
| 08 |
Grocery Outlet
Custom cartoon image with unique gradient sky blending to transparency. Popup shows stock grocery image with blended product logos. Contains link to detailed analysis page.
|
|
| 09 |
Music
Collage of song covers floating on transparent background. Popup features custom musical rankings image design.
|
The site's grand finale—an immersive interactive experience that transforms the cursor into a creative tool.
The cursor transforms into a bullseye controller. Each click creates colorful circular refractions. The brand phrase "infinite intelligence" floats on screen before morphing into the infinity symbol, with all letters illuminating in sequence.