Scrub - Dynamic Video Tutorial Landing Page Template Template | Build Fully Functional Applications with Rocket
Scrub - Dynamic Video Tutorial Landing Page Template
Scrub is a hub-and-spoke landing page template built for video tutorial sites. It combines a Skill Path Estimator, an anchor-nav timeline explorer, and a freemium conversion flow into one dark, motion-driven design. Every scroll and click mirrors an editing technique, making the page itself a live demo of the craft it teaches.
by Rocket studio
Loading preview…
Quick summary
Scrub is a single-page template designed for video tutorial platforms that teach editing and motion work. The layout is structured as a hub-and-spoke flow with a persistent anchor navigation bar. A Skill Path Estimator opens the experience, spoke sections reveal the course catalog and community, and a freemium signup flow closes each section with a clear next step.
Who this template is for
This template is built for creators and educators who teach video editing or motion design through structured online courses. It speaks directly to the people building those platforms, not just the students using them.
Course creators and independent educators launching a video tutorial site for editors and motion designers
Platform builders who need a single landing page that qualifies visitors, communicates curriculum depth, and moves them toward a free signup
Self-taught instructors who have outgrown simple link-in-bio pages and need a professional, conversion-focused home for their content
What problem this template solves
Most tutorial sites look like content libraries, not learning destinations. Visitors land, scroll a long list of course titles, and leave without a clear reason to sign up. Scrub solves the orientation problem before a visitor even reaches the course catalog.
New visitors do not know where to start, so the estimator creates a personalized path in three clicks and removes the paralysis of choice
The page lacks momentum without structure, so the timeline-style anchor nav gives every section a clear position and a kinetic entrance that keeps attention moving
Generic calls to action fail to convert curious visitors, so the freemium model pairs a low-commitment free tier with a contextual upgrade prompt tied directly to the visitor's estimated learning path
What you get with this template
You get a fully structured landing page layout built around a hub-and-spoke navigation model. Every section is designed and sequenced to serve a specific role in the visitor journey.
A header estimator block, five spoke sections (Catalog, Instructors, Student Work, Pricing, Community), and a recurring call-to-action pattern across the full page
Theme
Dynamic Motion
Creative direction
Interactive Explorer
Color system
Carbon Fiber
Style
Hub & Spoke (Anchor Nav)
Direction
Freemium/Trial
Page Sections
Skill Path Estimator Header
Persistent Timeline Anchor Nav
Kinetic Spoke Section Entrances
Freemium Signup and Upgrade Flow
Motion-as-curriculum Page Design
Related questions
Who is the Scrub template designed for?
What is the Skill Path Estimator and how does it work?
Does the template include a freemium conversion flow?
Does this template work for a single course or does it need a full catalog?
How does the anchor navigation work?
A carbon-fiber dark color system with electric blue interactive states, neon green progress indicators, and cool silver body text applied consistently across all components
A freemium conversion layer including a single-step signup form, a persistent progress bar, a free-versus-full comparison panel, and a contextual upgrade prompt
Feature list
This section describes the core functional components built into the Scrub template.
Skill Path Estimator
The header opens with an interactive estimator. Visitors select their current editing tool, their experience level, and their goal. On submission, a horizontal learning timeline animates into view, showing milestones, estimated hours, and lesson thumbnail previews. The result feels personal and immediate.
Timeline Anchor Navigation
A persistent horizontal bar sits below the header and functions like a video timeline. Each labeled chapter marker jumps the visitor to a spoke section. The bar stays visible during scrolling, so navigation always feels one click away.
Kinetic Spoke Sections
Each of the five spoke sections loads with a motion entrance. Cards slide in like clips dropping onto a track. Instructor bios show silent looping video portraits. Student before-and-after reels use a vertical wipe transition the visitor controls by scrolling.
Freemium Conversion Flow
A primary call-to-action reading "Start Learning Free" appears at the hub center after the estimator result and recurs at the close of each spoke. Clicking opens a single-step signup with email, password, and an optional editing-context dropdown.
Progress Bar and Upgrade Prompt
A persistent progress bar spans the top of the page and fills as lessons are completed. When the free-tier ceiling is reached, a contextual upgrade prompt appears with a side-by-side comparison of free access versus full access and the offer "Unlock the Full Timeline."
Motion-as-Curriculum Design
Every animation on the page mirrors an editing technique covered in the lessons. Scrubbing, wipe transitions, and timeline entrances are not decorative. They demonstrate what students will learn by letting visitors experience the techniques while browsing.
Page sections overview
Section
Purpose
Skill Path Estimator
Qualifies visitors and generates a personalized learning timeline
Timeline Anchor Nav
Persistent hub navigation linking all five spoke sections
Course Catalog Spoke
Displays available courses with kinetic card entrance animations
Instructors Spoke
Introduces instructors via silent looping video portraits
Student Work Spoke
Shows before-and-after reels with scroll-controlled wipe transitions
Pricing Spoke
Presents free versus full access tiers with comparison layout
Community Spoke
Highlights the learner community and social proof
Freemium Signup Form
Single-step signup with email, password, and context dropdown
Progress Bar
Persistent top-of-page indicator that fills with lesson completion
Upgrade Prompt
Contextual panel triggered at the free-tier ceiling
Design & branding system
The visual identity follows a Dynamic Motion theme built on a Carbon Fiber color system. The palette is designed to feel like a professional editing suite running late at night, where every bright color is earned by an action the visitor takes.
Backgrounds hold between deep carbon black (#0D0D0D) and woven graphite (#1A1A2E), with cool silver (#B0B3B8) used for body text to keep long reads comfortable against dark panels
Timeline-scrub electric blue (#00D4FF) appears only on navigation anchors, hover states, and progress bars, making every interactive element feel deliberate and control-like
Render-progress neon green (#39FF14) is reserved strictly for active states and progress indicators, so its appearance always signals that something is happening or has been completed
Mobile & speed optimization
The template is structured for fluid viewing across screen sizes. The hub-and-spoke layout and anchor navigation are designed to reflow naturally on smaller viewports without losing the timeline metaphor.
The persistent anchor nav collapses gracefully on mobile so chapter markers remain tappable without crowding the screen
Kinetic entrances and scroll-driven transitions are scoped to their individual spoke containers, keeping each interaction contained and predictable on touch devices
How this template helps you convert
Scrub is built around a freemium conversion model where every design choice reduces the distance between a curious visitor and a signed-up learner.
The Skill Path Estimator creates a personalized learning timeline before any course is shown, so visitors arrive at the call to action already invested in a specific outcome and more likely to sign up for the free tier
The recurring "Start Learning Free" call to action at the close of every spoke section means no visitor reaches a dead end, and the contextual upgrade prompt tied to the progress bar turns free-tier engagement into a natural moment for paid conversion
Other information about this template
Scrub is a purpose-built template for the video tutorial and online education niche. It is not a general portfolio or blog layout adapted for courses.
The template style is Hub and Spoke with Anchor Navigation, meaning all sections exist on one page and the nav bar acts as the structural spine
The header concept is a Calculator and Estimator component, which is one of the more advanced interactive header patterns available in this template category
The freemium and trial conversion direction makes this template well suited for platforms offering a free first module alongside a paid subscription tier
The design theme is Dynamic Motion, which means animation is intentional and instructional rather than cosmetic, reinforcing the editorial identity of the platform
Template builders working in tools like Webflow, Framer, or similar visual development environments will find the section structure and component logic straightforward to implement within their chosen platform
