Inspiration
- Marketing-first mindset – the site itself had to embody our digital-strategy expertise.
- A touch of FOMO – the landing page should instantly make visitors think, “Why am I not working with this team yet?”
- Code as media – during the Bolt hackathon we practiced vibe-coding: every camera move and content block reinforces the idea that digital is the foundation of future marketing.
What it does
- 3D hero scene (Three.js) – an interactive cloud of twelve particles assembles into the logo while scrolling.
- Dynamic portfolio cards – live case studies with auto-play video previews pulled from the CMS.
- MarTech toolkit demos – mini versions of MediaPlan Wizard, CampaignForge and Lead Temperature Map run directly on the page.
- AI chat (Edge Functions) – answers visitor questions about the 12 S Marketing Model.
- Zero-click CTA – a sliding side-panel form that never interrupts browsing.
How we built it
| Layer | Tech stack | Purpose |
|---|---|---|
| Front-end | Next.js 14 (App Router), React Server Components, Tailwind CSS | Hybrid SSR/ISR, rapid styling iterations |
| 3D & Motion | Three.js, drei, GSAP | WebGL scene and smooth-scroll effects |
| Back-end | Strapi v5 (PostgreSQL) + Vercel Edge Functions | Headless CMS and AI endpoints |
| DevOps | Vercel Preview Deployments, GitHub Actions | CI/CD within 48 hours |
| Content Flow | Figma → Bolt vibe-coding → MDX | Single source of truth for copy & code |
MDX blocks were auto-compiled into React components via Bolt’s vibe-coding pipeline.
Challenges we ran into
- Balancing WebGL performance with expressive visuals (maintaining 60 FPS).
- SEO for a rich SPA – hybrid SSR/SSG so search engines index content before 3D loads.
- Content pipeline in 48 h – synchronising copywriters, designers and developers in one MDX repo.
- Cross-browser parallax physics – custom shaders behaved differently in iOS Safari.
Accomplishments that we’re proud of
- Fully functional site with a 3D hero block and 90 + Lighthouse score on mobile.
- Live demos of internal MarTech products on the showcase.
- Modular design system (shadcn/ui) enabling no-code page assembly.
- Winner of “Best Marketing Experience” at the Bolt Hackathon.
What we learned
- React Server Components trimmed bundle size by ~30 %.
- Small micro-interactions (shadow ripples, hover audio) lifted lead-form conversion by ≈ 12 %.
- The “three-layer rule” for WebGL (logo, background, particles) keeps 60 FPS even on 2020 Android devices.
- MDX + vibe-coding is an effective bridge between content creators and developers.
What’s next for 12tchk
- Edge-AI personalisation – swap case studies on-the-fly based on visitor industry.
- Launch MediaPlan Wizard as a standalone SaaS module.
- Gamification – points for interactive 12 S Model quizzes redeemable for discounts.
- Release an open-source Three.js marketing toolkit (shaders, scroll controllers).
- Roll out an international version (EN/ES) with graceful fallback for limited WebGL browsers.
Built With
- next
Log in or sign up for Devpost to join the conversation.