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

SectionPurpose
Animated HeroOpens with SVG line-draw and typewriter manifesto headline
Manifesto Masonry GridBelief-statement cards with embeds and rope-texture imagery
Quiz AssessmentFive illustrated questions leading to archetype result
Results and Email CaptureDelivers archetype, playlist link, and knot roadmap offer
Minimal FooterHorizontal 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.

  1. The animated hero reframes who macramé is for with a single sentence, lowering the entry barrier before the visitor reads another word
  2. 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
  3. 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
Knot - Artisan Macramé Landing Page Template
Knot - Artisan Macramé Landing Page Template
Knot - Artisan Macramé Landing Page Template
Knot - Artisan Macramé Landing Page Template

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?