Creactive Hub
← Portfoliocase study
From Figma to a real experience
We built Creactive Hub's website from scratch: translating a design rich in animation and micro-interactions into a fluid, performant, fully manageable web experience.
Creative agency
Web development + CMS
2025
Context
The brief
Creactive Hub is a creative agency without a site aligned to its current positioning. The project started from zero: UI/UX design came from VEO, with rich animation, micro-interactions and transitions. The challenge was shipping that vision without losing quality, fluidity or performance.
Challenge
The constraint
Implement complex animations and page transitions without hurting performance. The site also had to be manageable by the internal team, bilingual (ES/EN) and SEO-optimized in code — without dev for every content update.
deliverables
What we built
Frontend
Pixel-perfect from Figma
Next.js 15 + React development honoring VEO typography, layouts, colors and micro-interactions. Full desktop and mobile responsive.
Animation
Advanced GSAP
Complex animations and page transitions with GSAP, keeping fluidity without hurting load times or UX.
CMS
Self-service management
Integrated headless CMS so the team manages content, sections and assets independently, without dev intervention.
SEO + Infra
Technical from code
Semantic structure, metadata, Open Graph, hierarchical headings, sitemap and favicon. Infrastructure and production deployment guidance.
outcome
A site where design and development work as one: full alignment between Figma and the browser experience, with a solid, bilingual, scalable technical base.
process
How we did it
Design analysis
Deep technical review of Figma: components, animations, breakpoints and navigation flows.
Frontend architecture
Stack: Next.js 15, React, GSAP. Scalable structure focused on performance and maintainability.
Frontend development
Pixel-perfect implementation. Every section, transition and micro-interaction replicated from Figma.
CMS + technical SEO
Headless CMS integration, ES/EN bilingual setup, metadata, OG, sitemap and technical SEO optimization.
QA + deployment
Performance, responsiveness and experience testing. Infrastructure and go-live guidance.
Results
Lighthouse · Actual site analysis (mobile) — April 23, 2026
| Metric | Score (mobile) | Note |
|---|---|---|
| Performance | 83 | GSAP animations on initial load · room to improve |
| Accessibility | 58 | Contrast and ARIA pending · active improvement plan |
| Best Practices | 100 | Perfect — clean, secure code |
| SEO | 44 | Meta tags pending completion in CMS |
| FCP (First Contentful Paint) | 6,1s | Within expected range with animations |
| LCP (Largest Contentful Paint) | 12,0s | Opportunity to optimize visual assets |
| CLS (Layout Shift) | 0,051 | Stable · no significant layout shift |
Note: Accessibility and SEO scores reflect the site's initial state. They tie to content and meta tags still being loaded in the CMS by the client, not development technical decisions.
100
Best Practices — flawless code
83
Performance Lighthouse (mobile)
9 wks.
Project duration
ES/EN
Fully bilingual site
Project outcomes
- Digital presence from scratch, aligned to the brand's creative DNA
- Advanced GSAP animations without compromising user experience
- Full design fidelity: pixel-perfect on desktop and mobile
- Headless CMS: self-managed content without technical intervention
- Bilingual ES/EN — translation applied in Figma and in code
- 100/100 Best Practices — clean, secure technical foundation
- Scalable structure ready for new sections and future iterations