03 / Creative studio website
Hypnotica
A creative studio, brought to life in motion.
Complete website and admin system implementation
Case study draft
Executive summary
I built Hypnotica’s entire website from A to Z, including its admin system. Morphing particle artwork, an interactive services experience, dedicated service pages, and a filterable portfolio give the studio a distinctive public presence. Enquiry and booking journeys connect that experience to the studio’s day-to-day operations.
Texture, light, and movement set the tone.
At a glance
- Active users · Jan–Dec 2025
- 2.1K
- Sessions · Jan–Dec 2025
- 2.9K
- Team access, testimonials, delivery, and insights
- Admin system
- Average engagement per active user · 2025
- 1m 20s
Behind the build
Technology stack
The development toolkit and connected services used at Hypnotica.
Next.js and TypeScript underpinned the website and admin system, alongside Resend and Google Calendar integrations.
Development & infrastructure
Building, testing, and delivering the product.
Next.js
TypeScript
MySQL- RESTful APIs
Vercel
Services & integrations
External services connected to the platform.
- Resend
- Google Calendar
- Google Analytics Data API (GA4)
- Cloudflare Turnstile
Introduction
Hypnotica is a creative studio with five connected disciplines: brand identity, strategy, digital, product, and creative. The website spans a motion-led homepage, a services overview and individual service pages, a filterable work collection and project case studies, about and blog destinations, and contact and consultation paths.
My scope covered the public website and the admin system used to manage team access, testimonials, email delivery, and traffic insights. The projects shown in the studio’s portfolio belong to Hypnotica’s own body of work; my contribution here is the website that presents them.
Feature summary
Morphing visual identity
Green cube-like particles reform into recognisable objects on the homepage; sculptural geometry carries the same visual language into the services experience.
Interactive services
Five service categories with automatic rotation, manual tabs, a pause control, animated geometry, and links to dedicated service pages and relevant work.
Portfolio and editorial content
A filterable project collection, individual case studies, about and blog destinations, plus service detail pages with discipline tabs, process stages, and FAQs.
Contact and booking
Paths for visitors to send an enquiry or arrange an introductory conversation.
Admin workspace
A central dashboard for admin users and team access, testimonial publishing, email delivery tracking, account management, and traffic analytics.
The work
Build a complete studio website
I handled the entire website build across the homepage, services overview, five service detail destinations, work collection and project case studies, about, blog, and contact journeys. The scope also includes the admin system that supports the studio behind the scenes.
These pages form a connected route through the business. Service pages link to relevant projects, project browsing can be filtered by discipline, and enquiry and booking calls to action give visitors a next step throughout the site.
Make motion part of the studio’s identity
The homepage’s approach section uses a green particle sculpture that changes silhouette over time. Small cube-like elements assemble into heart-shaped hands, a sun, and a coffee cup, passing through intermediate arrangements as the form changes. The motion gives the studio’s introduction a recognisable visual signature alongside its strategy and design message.
The services overview extends that language with textured green geometry above a perspective grid. Its sequence moves through sound-wave bars, a compass, atomic particles, a cube, and a sculptural flourish. The distinctive work here is the changing form and continuity between states, rather than a collection of independent static illustrations.
Thousands of small forms. A continuous changing silhouette.
Connect service discovery, motion, and proof
The services overview combines five category tabs—Branding, Strategy, Digital, Product, and Creative—with rotating content and morphing artwork. Visitors can select a category themselves or pause the rotation. Each panel connects the service explanation to a dedicated service page and a relevant studio case study; a separate studio reel introduces the range of work.
The individual product service page shows the depth behind that overview: discipline tabs, a staged process with rotation controls, selected project work, and expandable FAQs. The work collection adds category filters and individual project destinations. I implemented the website presenting this material; the studio’s brand and client projects remain Hypnotica’s own work.
Give interest somewhere to go
The contact page provides an enquiry route and an invitation to book a consultation. Those paths give visitors a next step after exploring the studio and its projects.
They complete the website’s journey: discover the studio, understand its services, inspect its work, and get in touch.
Support the studio behind the scenes
Alongside the public website, I built an admin workspace for the studio’s operational needs. It brings admin users and team access, testimonials and their publication status, email delivery tracking, and account management into one system.
The overview combines operational summaries with a traffic snapshot: active and total users, sessions, page views, realtime activity, and an active-user trend chart. Bounce and engagement indicators give the team additional context when reviewing site activity.
Impact
Hypnotica received a complete studio website combining morphing visual storytelling, interactive service discovery, a filterable portfolio, editorial destinations, and routes into a project conversation. The admin system also gives the studio a central place to manage access, testimonials, delivery, and traffic insights.
The supplied Google Analytics report records approximately 2.1K active users, 2.1K new users, and 2.9K sessions from 1 January to 31 December 2025. Average engagement time per active user was 1 minute 20 seconds. These are site-level results across acquisition channels, including paid traffic. The figures are rounded as displayed in the report; they describe website usage without attributing it solely to the implementation.
Conclusion
This project is an example of complete ownership: taking responsibility for the website as a connected experience, from morphing artwork and interactive service discovery to detailed content, contact journeys, and the admin tools that support the studio behind the scenes.