Stipple is a modular card grid landing page template built for scalp micropigmentation training academies. It pairs a draggable 3D rotary pen render with macro craft photography and a dot-by-dot progressive image load to make precision feel tangible before a visitor reads a single word. One focused call to action drives every card toward the enrollment detail page.
by Rocket studio
Loading preview…
Quick summary
Stipple is a single-page template designed for a scalp micropigmentation (SMP) training academy. It opens with a photorealistic 3D spinning rotary pen, moves through a sensory card grid of macro craft imagery and looping video, and closes every section with a single call to action. The atelier-meets-clinical aesthetic builds trust through visual proof, not form fills.
Who this template is for
This template is built for SMP training studios and professional skills academies targeting licensed skin and hair professionals who want to add a high-margin clinical service to their practice.
Licensed cosmetologists pivoting from general beauty work into medical aesthetics
Barbers seeking a higher-margin chair skill with clinical credibility
Nurses and aesthetic practitioners exploring cosmetic tattooing as a specialist service
What problem this template solves
Most training programme pages lead with course outlines and pricing tables. That approach asks visitors to commit intellectually before they have felt the craft. Stipple solves this by reversing the order.
Visitors experience the precision of SMP through macro imagery and looping video before they read a syllabus
The single call to action removes decision friction and channels intent toward one enrollment destination
Social proof in the form of a graduate counter and before-and-after imagery replaces hollow claims with visible results
What you get with this template
Stipple delivers a fully structured, high-interactivity landing page ready to represent a scalp micropigmentation training academy at a premium level. Every section is built to a defined purpose.
A hero section with a draggable 3D CSS pen rotation, floating cards, and a tracked-out graphite headline
A modular sensory card grid with macro photography, a looping video card, and a dot-by-dot progressive before-and-after reveal
A graduate counter, testimonial cards, an asymmetric bento for three audience profiles, and a curriculum module list with hover states
Theme
Atelier Studio
Creative direction
Sensory Appeal
Color system
Soft Mist
Style
Card Grid (Modular)
Direction
Click-Through
Page Sections
Draggable 3D Rotary Pen Hero
Sensory Modular Card Grid
Dot-by-dot Progressive Image Reveal
Floating Enrollment Call to Action Bar
Graduate Counter and Testimonial Cards
Curriculum Module List with Hover States
Related questions
Does this template include a sign-up or contact form?
Can I replace the 3D pen model with a different product render?
How many call-to-action points does this template include?
Is the dot-by-dot progressive image reveal built into the template?
Who is this landing page template designed for?
Feature list
This landing page template includes the following built-in components and interactions.
Draggable 3D Rotary Pen Hero
The hero renders the academy's signature training pen in photorealistic 3D detail, slowly rotating on a vertical axis against a parchment background. Visitors can drag to spin it themselves. The needle cartridge catches simulated light as it turns, and micro-text etched on the barrel reveals the academy name. After two seconds, the headline materializes in thin graphite type.
Sensory Modular Card Grid
Each card in the grid isolates one sensory dimension of the craft. One card shows a macro photograph of pigment dispersing into dermal tissue. A second card loops a video of a gloved hand executing a hairline fade with a faint mechanical hum as the only audio. A third card loads a scalp transformation image dot by dot, replicating the procedure rhythm itself.
Dot-by-Dot Progressive Image Reveal
The before-and-after scalp transformation card loads the "after" image progressively, deposit by deposit, so visitors literally watch the procedure result build on screen. This interaction communicates clinical precision without a single word of explanation.
Floating Enrollment Call to Action Bar
A sticky call to action bar appears after the third card row and persists as visitors scroll. The primary button reads "Explore the Programme" in antiseptic teal. The floating bar and the hero button both route to the same enrollment detail page, keeping the funnel singular and focused.
Graduate Counter and Social Proof Cards
A live-style counter displays 847 certified graduates alongside testimonial cards with real names and before-and-after imagery. This section converts sensory interest into institutional trust before the visitor reaches the curriculum section.
Curriculum Module List with Hover States
The curriculum section presents a clean list-style overview of training modules. Each row responds to hover with a teal state, inviting exploration without overwhelming the visitor with dense copy.
Page sections overview
Section
Purpose
Hero Spinning Pen
Introduce the academy with a draggable 3D rotary device render and materialized headline
Sensory Card Grid
Communicate craft precision through macro photography, looping video, and progressive image load
Who It's For
Present three audience profiles in an asymmetric bento layout
Graduate Proof
Build trust with a certified graduate counter, testimonial cards, and before-and-after imagery
Curriculum Modules
Outline training content in a list view with interactive hover states
Page Footer
Close with a linear single-row footer pattern
Design & branding system
Stipple uses a Soft Mist color system built around clinical warmth. The palette feels like unbleached cotton laid over a steel instrument table: calm enough to reassure, precise enough to signal expertise.
Colors: studio fog (#E8E4DF) and warm parchment (#F5F0EB) alternate as section backgrounds; graphite (#3B3B3B) carries all body and display text; antiseptic teal (#7AAFB2) appears only on buttons, progress indicators, and hover states
Typography: Fraunces serif handles display headings for warmth and authority; DM Sans carries body text for clean legibility
Visual language: quiet atelier aesthetic with white-wall stillness, lit instrument trays, and sparingly used teal accents that enter the frame like a gloved hand
Mobile & speed optimization
Stipple is designed desktop-first to match how professional learners research training programmes, with a strong mobile fallback so the experience holds on any screen.
Desktop-first layout ensures the 3D pen interaction, card grid proportions, and floating call to action bar render with full fidelity on large screens
Mobile fallback preserves the sensory card grid and progressive image reveal at smaller viewports without degrading the visual hierarchy
Performance is managed through React Server Components for static sections and Client Components scoped to the 3D spin and scroll interactions
How this template helps you convert
Stipple is structured as a single-funnel landing page where every interactive element builds confidence and routes to one destination.
The draggable 3D pen and sensory card grid create an emotional and tactile connection to the craft before any written pitch is made, so visitors arrive at the call to action already convinced.
The graduate counter and testimonial cards remove scepticism at the proof section, replacing abstract claims with visible, named results that a professional audience will respect.
The floating "Explore the Programme" bar ensures the call to action is always one tap away, reducing the chance that an engaged visitor loses the moment before clicking through.
Other information about this template
Stipple is built as a Next.js template using React component architecture, with animations delivered through a combination of CSS 3D transforms and scroll-triggered reveal states. It is intended as a starting point for a scalp micropigmentation training academy landing page and can be adapted to represent other specialist aesthetics education studios.
Template style: Card Grid (Modular), Atelier Studio theme, Sensory Appeal creative direction
Header concept: 3D Product Spin with drag interaction and scroll-triggered headline materialization
Landing page direction: Click-Through, with no on-page form and a single enrollment destination
Color system label: Soft Mist, as defined by the studio fog, parchment, graphite, and teal palette
Localization: English (United States), USD pricing convention, standard US date format
Audience categories: Beauty and Personal Care, Specialty Beauty Treatments, Scalp Micropigmentation Training Academy
