The network for creativity
Join 1.25M professional creatives like you
Connect with clients, get discovered, and run your business 100% commission-free
Creatives on Contra have earned over $150M and we are just getting started
Back to feedPost
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.
The network for creativity
Join 1.25M professional creatives like you
Connect with clients, get discovered, and run your business 100% commission-free
Creatives on Contra have earned over $150M and we are just getting started
Related posts
Project Title
Stitch Playground
Created by:
Diana D. (UX/UI Designer)
Intro
I created "Stitch Playground" an interactive learning experience that helps Stitch users turn your rough interface ideas into clearer more useful prompts.
This project is designed for people who have an idea for an interface but are not sure how to get started in Stitch. Instead of simply telling users to “Write me better prompts,” Stitch Playground shows them how a vague request can become a stronger design brief by adding the right context: What the interface is, who it is for, how it should feel, what sections it needs, and what visual styles Stitch should follow.
The goal of my project was to make prompt writing feel easier, more approachable, and fun for Stitch users.
What I Built:
I built Stitch Playground in Stitch as a clean interactive experience that helps Stitch users get started easily.
What it includes:
A bold clean interactive landing page introducing Stitch Playground
Motion design in the hero and footer (new Stitch features)
A prompt-learning interactive component based on clearer design direction (Inspired by Vincent's Stitch prompting blog post)
A before-and-after comparison showing how vague prompts become stronger Stitch prompts
An interactive prompt builder for turning rough ideas into more complete prompt structures
A prompt deconstructor concept for understanding what makes a prompt more useful
A starter library of reusable prompt examples for dashboards, blogs, entertainment experiences, and portfolios
How I Used Stitch:
I used Stitch as a creative partner to explore, shape, and refine the experience and ideas from a rough concept into a polished finalized experience.
The starting idea was simple: create a guide that helps people prompt Stitch better. From there, I used the Stitch workflow to think through the page structure, content sections, visual style, and interactive learning moments. The project became both a prototype and a teaching tool: it demonstrates how stronger prompting can lead to clearer interface direction.
I focused on the same process the experience teaches: starting with a broad idea, then refining the design by adding clearer context, visual direction, specific sections, and more intentional interface details.
How This Connects to the Stitch Workflow:
Stitch Playground is built around the idea that better prompts create better starting points.
The experience encourages users to move beyond one-line requests like “make a landing page” and instead describe the product goal, audience, style, layout, content modules, and interaction patterns. This makes the design process feel less random and more collaborative.
I also wanted the project to reflect how Stitch can fit naturally into a real creative workflow: ideating, refining, comparing versions, and turning prompt structure into interface structure.
Stitch Features / Workflow Highlighted:
This project highlights Stitch as an (amazing) interface builder that helps users move from idea to interactive product faster. It also emphasizes prompt-based iteration, structured design direction, and using Stitch as a collaborative design partner.
I used new features presented on Stitch's X last week, such as motion and experimented with the Netify connection, Figma export and Google Studio import. I also added a restriction of 4 prompts per day to ensure my webpage does not get abused.
Feedback on Stitch:
Stitch is incredibly POWERFUL, not just for developers but for designers too. You can easily get started with a simple prompt in Stitch to create something truly amazing.
Why I Built It:
I wanted to make something helpful for the Stitch community. Thank you team. I am so happy to have found this product.
Start Playing in your Stitch Playground >
- Diana
Genius!
Redesigned the website for Imagine Dragons' charitable foundation - restructuring the information architecture, crafting donation-focused CTAs, and weaving the band's visual identity throughout so visitors feel the mission.
Every page was built to guide visitors from awareness to action
beautiful design
Mainframe is a conceptual AI studio — brand system + full multi-page website, built entirely in Stitch. Landing page with animated states, five inner pages (Labs, Studio, Services, Openings), and a complete DESIGN.md covering color, type, and layout. Monochromatic, editorial, cinematic. The kind of system that usually takes weeks — done in one session.
Started with brand tokens, used them as the foundation for every page. Iterated hover states and animations without leaving the design context. The generated DESIGN.md became the actual handoff doc.
Fastest I've gone from concept to a coherent multi-page system. Want: auto-propagating token updates across pages, finer motion controls, native multi-page navigation. Otherwise — best design-gen tool I've used since Figma got auto-layout.
Sahil, I recall seeing that same exact monitor-head concept from a large design studio last week (I forget the name).
Challenges
View all
Trending
Claude
Claude has entered the design space. How are you using Claude Design?
Contra University
Learn from expert creatives how to earn more using next-gen AI tools.
creativeaiflow
Creative AI workflows are evolving. What tools do you use, and what are their strengths and weaknesses?
portfolioreview
The best portfolios tell a story, not just show a grid. Share yours for feedback.
freelancerlife
Freelancer life is wins, pivots, and everything in between. What’s yours right now?
