Panko Creative Hub - The Creative & Tech Ecosystem
An immersive and highly visual web experience designed for Panko Creative Hub. The platform was conceived as an interactive digital ecosystem reflecting the agency's synergistic duality: on one side, the creative soul dedicated to branding, social media, and influencer marketing (Panko); on the other, the technical soul focused on custom software development and advanced digital experiences (Imori Studio).
The project visually translates this "dual offering" concept through a refined, dynamic, and energetic "cyberpunk lite" visual language. Leveraging a cutting-edge architecture based on Next.js and React, enriched with three-dimensional WebGL elements and fluid transitions, the site transforms navigation into an interactive journey that communicates innovation from the very first moment, positioning itself as the digital business card of a crew focused on the future.
Technical Features
- 3D WebGL & React Three Fiber: Integration of real-time three-dimensional canvases (an interactive particle field responsive to mouse movement, floating abstract wireframe geometries, and a gradient sphere with custom GLSL shaders) to bring spatial depth and a technological look to the interface.
- Duo Video Crossfade Hero: Development of a custom hero system that randomly selects two different high-impact background videos on startup. The videos loop and transition with a smooth 1-second crossfade managed via React refs, maximizing initial user engagement.
- Native Multilingual Architecture: Implementation of server-side multilingual routing (Italian/English) to ensure excellent SEO performance, with dynamic generation of sitemaps and hreflang tags, allowing the agency to target an international market.
- Tailwind & Custom Design System: Adoption of Tailwind CSS to optimize build-time and maximize style reactivity. The design system is based on deep dark tones, high-contrast neon orange accents, and geometric typefaces like Space Grotesk and Inter.
- Counters & Interactive Timelines: Use of Framer Motion for scroll-triggered animated counters (influencer, project, and client statistics) and interactive timelines that clearly show the "client journey" and operational synergy between branding and code.
- Server-Safe Form Validation: Integration of React Hook Form and Zod for robust client-side and server-side validation, connected to a secure API endpoint with Nodemailer that automatically routes contact requests based on the user's needs (creative or tech).
- Lenis Smooth Scroll & Micro-interactions: Implementation of Lenis-based smooth scrolling combined with dynamic hover effects (tilt cards and reactive glow effects) to deliver a premium user experience on any device.
Cyberpunk Lite Design
Panko Creative Hub's visual language breaks the mold of classic corporate websites. We used a color palette dominated by pure black (#000000) and charcoal gray to enhance the neon orange (#FF5722) glows and contrasts, representing Panko's energy. Technical grids, digital noise texture overlays, and angled components evoke cyberpunk control interfaces, without ever sacrificing elegance, readability, and usability.
Performance & Ecosystem Synergy
The main challenge of the project was balancing rich multimedia content (heavy hero videos, complex Three.js 3D animations, and scroll-triggered Framer Motion transitions) with the need for instant loading times and excellent Core Web Vitals for SEO. Thanks to Next.js static pre-rendering and Server Components, combined with an optimized media asset pipeline, we created a lightning-fast, secure, and highly scalable platform deployed on Vercel's Edge Network.