Knot - Artisan Macramé Landing Page Template
Knot is a single-page macramé and fiber art landing page template built for TikTok content creators. It combines an animated SVG line-draw hero, a manifesto-style masonry grid, and a five-step personalized quiz to convert craft-curious visitors into followers and email subscribers. The warm artisan aesthetic makes every scroll feel intentional and handmade.
by Rocket studio
Quick summary
Knot is a landing page template designed for macramé and fiber art TikTok channels. It opens with an animated ink-sketch hero, moves through a belief-statement masonry grid, and closes the loop with a personalized quiz that matches each visitor to their fiber-art archetype. The result is a page that feels tactile, honest, and built to earn trust before asking for anything.
Who this template is for
This template is made for creators who teach craft through short-form video and want a home base that feels as considered as their content. It works equally well for beginners sharing their first knotting journey and experienced fiber artists building a dedicated community.
- TikTok creators in the macramé and fiber art space looking to grow an email list
- Craft-curious content makers who want a page that reflects a handmade, artisan aesthetic
- Fellow fiber artists building a technique-focused channel and a personalized viewer experience
What problem this template solves
Most creator landing pages feel generic. They list a bio, drop a link, and ask for a follow without earning it. Craft audiences are skeptical of polished funnels and respond better to pages that feel made by hand and addressed to them personally.
- Visitors arrive with no clear entry point into your content and leave without converting
- A one-size-fits-all call to action misses the wide range of skill levels in a craft audience
- Standard page layouts do not reflect the tactile, texture-first visual language of fiber art
What you get with this template
You get a fully structured single-page layout with distinct sections that guide the visitor from curiosity to commitment. Every element is purpose-built for a craft content creator, from the animated header to the quiz result flow.
- An animated SVG hero with a looping line-draw illustration and a typewriter manifesto headline
- A staggered masonry grid of belief-statement cards with TikTok embeds and rope-texture close-ups
- A five-step illustrated quiz with archetype results, personalized playlist links, and an email capture on the results page
Feature list
Animated SVG Line-Draw Hero
The header opens with a hand-drawn ink sketch of tangled cord resolving into a finished macramé silhouette. The animation loops as a single stroke-draw sequence on a creamy parchment background. When the line completes, a rough serif headline writes itself in a typewriter effect.
Manifesto Masonry Grid
The belief-statement section uses a staggered masonry layout where cards breathe unevenly at different heights. Some cards hold a single rope-texture close-up while others display wide time-lapse embeds of a wall hanging taking shape. The rhythm builds as the visitor scrolls, with statements growing bolder and the work growing larger.
Five-Step Personalized Quiz
The quiz is the primary conversion engine. It presents five illustrated questions about habits, textures, available time, and starting fears. A state machine processes the answers and sorts visitors into one of three fiber-art archetypes, each with a personalized TikTok playlist link and a beginner supply list.
Archetype Results with Email Capture
Each quiz result delivers a tailored experience. The results page names the visitor's archetype, whether that is The Meditative Knotter, The Pattern Chaser, or The Freestyle Sculptor. Email capture sits naturally on this page as a value exchange rather than a demand.
GSAP ScrollTrigger Reveals
Section transitions use GSAP ScrollTrigger to stagger image reveals and parallax effects as the visitor scrolls. This gives the page a sense of momentum that mirrors the pacing of a well-edited TikTok video without requiring any video embeds in the hero.
Warm Artisan Typography System
Headlines use Fraunces, a rough serif that carries the handmade quality of the visual identity. Body copy uses DM Sans for clean readability. Accent labels are set in JetBrains Mono to add a quiet technical contrast to the organic aesthetic.
Page sections overview
| Section | Purpose |
|---|---|
| Animated Hero | Opens with SVG line-draw and typewriter manifesto headline |
| Manifesto Masonry Grid | Belief-statement cards with embeds and rope-texture imagery |
| Quiz Assessment | Five illustrated questions leading to archetype result |
| Results and Email Capture | Delivers archetype, playlist link, and knot roadmap offer |
| Minimal Footer | Horizontal flow footer closing the page cleanly |
Design & branding system
The visual identity follows a Warm Artisan direction built on an Ink and Paper color system. The palette feels like a handwritten note on kraft paper, unhurried and deliberately imperfect, with each color serving a specific role in the layout.
- Background stays in unbleached cotton white (#F5F0E8), text lives in brushstroke charcoal (#2C2C2C), and terracotta (#C4775B) marks every button and interactive moment
- Dried lavender (#A68B8B) handles hover states and accent borders throughout the page
- Typography pairs Fraunces rough serif headlines with DM Sans body copy and JetBrains Mono for accent labels
Mobile & speed optimization
The template is built with a mobile-first approach because the core audience discovers content on their phones through TikTok. Desktop layout is enhanced from the mobile base rather than the other way around.
- Server Components handle static sections to keep the page lean, while the quiz runs as a dedicated Client Component
- The masonry grid and card reveals are designed to reflow cleanly on small screens without losing the staggered rhythm
- Animations use SVG stroke-dashoffset and GSAP ScrollTrigger, keeping motion intentional rather than decorative
How this template helps you convert
The page earns conversion through progressive trust rather than a hard sell. Each section prepares the visitor for the next ask, so the email capture on the results page feels like a natural conclusion rather than an interruption.
- The animated hero reframes who macramé is for with a single sentence, lowering the entry barrier before the visitor reads another word
- The masonry grid builds belief through visual proof, replacing generic testimonials with craft-specific statements that speak directly to rental-wall dreamers and technique seekers
- The quiz makes the visitor feel seen before asking for their email, turning a standard lead capture into a personalized starting point they actually want to receive
Other information about this template
This template sits in the Blog and Editorial category under the Macramé and Fiber Art Content subcategory. It is purpose-built for creator and content channel use cases rather than e-commerce or portfolio display.
- The creative direction follows a Manifesto style, meaning the page speaks directly to the visitor as a set of beliefs rather than a product pitch
- The header concept is a Custom Illustration rather than photography or video, keeping load weight low while maintaining strong visual impact
- The quiz landing page direction uses a state machine to manage five illustrated question steps and three possible archetype outcomes
- The template is delivered as a single-page layout with a Masonry and Pinterest-style grid as its dominant structural pattern
- The footer uses a minimal horizontal flow pattern consistent with the overall unhurried visual tone




Theme
Warm Artisan
Creative direction
Manifesto
Color system
Ink & Paper
Style
Masonry/Pinterest
Direction
Quiz/Assessment
Page Sections
Animated SVG Line-draw Hero
Manifesto Masonry Grid
Five-step Illustrated Quiz
Archetype Results with Email Capture
GSAP Scrolltrigger Reveals
Warm Artisan Typography System
Related questions
Does the quiz actually sort visitors into different results?
Can I change the belief statements in the masonry grid?
Is this template suitable if I am not a professional designer?
How does the email capture work on the results page?
What animation library does this template use?