This site is a Work In Progress

Site Navigation

NeoBooks In Progress

Creating a NeoBook (start here)

Admin and Help

Edit on GitHub


STUMP JERRY'S BRAINS — Framer Build Guide

Everything you need to go from blank canvas to live site

STARTING POINT: Which Template?

Use a blank canvas. Not a template.

Here's why: every Framer template comes with its own component library, spacing conventions, and color system that you'll spend more time fighting than using. This site has a very specific visual identity — Bebas Neue display type, the warm paper/ink palette, the editorial layout. Starting blank takes 20 minutes of setup and saves hours of fighting someone else's opinions.

The one exception: if you want Framer's CMS for future blog posts or case studies, start with their blank "CMS Starter" — it adds CMS scaffolding without imposing a design.

PHASE 1: PROJECT SETUP (20 min)

1.1 Create the project

1.2 Add fonts

Site Settings → Fonts → Add Google Font. Add these four:

1.3 Add color variables

Site Settings → Variables → Colors. Create these tokens (name them exactly — you'll reference them throughout):

Token name Hex value Role
ink #0A0A0A Primary background, text
paper #FAF7F2 Page background
cream #F5F0E8 Text on dark
canary #F7C948 Accent, CTAs, ticker
ember #E8531A CTA hover, logo 's', booking bg
navy #1A3A5C Story section, How It Works bg
teal #2A9D8F TheBrain color, labels
mid #8A7F70 Secondary text, metadata

1.4 Add global custom code

Site Settings → Custom Code → Head Tag. Paste this:

<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Syne:wght@400;700;800&family=IBM+Plex+Mono:wght@400;500&family=Playfair+Display:ital,wght@1,400;1,700&display=swap" rel="stylesheet">
<style>
body { cursor: none; }
.cursor { position:fixed; width:12px; height:12px; background:#e8531a; border-radius:50%; pointer-events:none; z-index:9999; transition:transform 0.1s; mix-blend-mode:multiply; top:0; left:0; }
.cursor-ring { position:fixed; width:36px; height:36px; border:1.5px solid #e8531a; border-radius:50%; pointer-events:none; z-index:9998; opacity:0.5; top:0; left:0; }
@keyframes ticker-scroll { from { transform:translateX(0); } to { transform:translateX(-50%); } }
</style>

Site Settings → Custom Code → End of Body. Paste this:

<div class="cursor" id="sjb-cursor"></div>
<div class="cursor-ring" id="sjb-ring"></div>
<script>
(function(){
  var c=document.getElementById('sjb-cursor'),r=document.getElementById('sjb-ring');
  if(!c||!r)return;
  var mx=0,my=0,rx=0,ry=0;
  document.addEventListener('mousemove',function(e){mx=e.clientX;my=e.clientY;});
  (function tick(){
    c.style.transform='translate('+(mx-6)+'px,'+(my-6)+'px)';
    rx+=(mx-rx-18)*0.12;ry+=(my-ry-18)*0.12;
    r.style.transform='translate('+rx+'px,'+ry+'px)';
    requestAnimationFrame(tick);
  })();
})();
</script>

1.5 Set up canvas breakpoints

In Framer's toolbar, set breakpoints:

PHASE 2: IMPORT THE SVG ASSETS (5 min)

All SVGs are in the /svgs folder of this kit. Import them into Framer:

Method A (drag & drop): Open your Framer canvas. Drag SVG files directly from Finder/Explorer onto the canvas. Framer imports them as editable vector layers.

Method B (insert menu): Press I (insert) → Image → select SVG file.

What to do with each SVG:

File Where to use Notes
brain-web-hero.svg Hero section background Set opacity to 7-8%. Position: absolute, cover the hero frame.
node-diagram.svg "The Story" section Place in right column alongside body copy.
thebrain-mockup.svg Brain Demo section Place in right column. Add a dark frame around it to simulate the app window chrome.
wordmark.svg Anywhere you need the logo at large sizes The HTML/CSS file renders this in type; SVG version is for export/print.

PHASE 3: BUILD THE PAGE SECTIONS

Work top to bottom. Each section is a full-width Frame with Auto Layout (vertical). Here's the build order and key settings:

NAV

HERO

Left column:

Right column (Provenance Card):

TICKER

THE STORY (Provenance Section)

Left column:

Right column:

HOW IT WORKS

BRAIN DEMO

OFFERS

Tier rows (NOT cards — use horizontal rows):

Left cell (price column):

Right cell:

Featured (Core) row: background ink, text cream, adjust colors accordingly

Brain on Call box:

TESTIMONIALS

FAQ

BOOKING

FOOTER

PHASE 4: SCROLL ANIMATIONS

For every major section element:

  1. Select the Frame or text layer
  2. Right panel → Appearance → Scroll Effects
  3. Set: Initial opacity 0, Final opacity 1
  4. Set: Initial Y offset 24px, Final Y offset 0px
  5. Trigger: "When enters viewport" at 10% threshold
  6. Duration: 0.7s, Ease: ease-out
  7. For staggered reveals (e.g. manifesto lines), add increasing delay: line 1: 0s, line 2: 0.1s, line 3: 0.2s, line 4: 0.3s

Hero elements use entrance animations (not scroll), set in the Framer Animate panel with a page-load trigger.

PHASE 5: CODE COMPONENTS

For the three components that need code:

Ticker: Assets panel → + → New Code File → Ticker.tsx Paste the TICKER_COMPONENT code from framer-code-snippets.js Drag onto canvas in the ticker section.

FAQ Accordion: Same process → FAQ.tsx → paste FAQ_COMPONENT Drag into the right column of the FAQ section.

Chamfered Button: Same → ButtonPrimary.tsx → paste BUTTON_COMPONENT Use wherever you need the primary CTA button.

Animated Brain Web: BrainWeb.tsx → paste BRAINWEB_COMPONENT Place inside hero frame as absolute layer.

PHASE 6: FORM SETUP

Framer has a built-in Form component. Use it for the booking form:

  1. Insert → Form → drag into the booking section right column
  2. Add fields: name, email, text (conference), select (format), textarea
  3. Connect to: either Framer's built-in form submissions (Site Settings → Forms) or use a Typeform/Tally embed for more control
  4. Redirect on submit: a simple "Thanks — I'll be in touch" message is fine. No need for a separate page.

Recommended: Use Tally.so for the form. It's free, looks clean, can be embedded as an iframe, and sends to email + Notion/Airtable. It keeps the form functional even if Framer's hosting changes.

PHASE 7: SEO + META

Site Settings → SEO:

For the OG image (social share preview — 1200×630px): Create in Figma (free):

PHASE 8: PUBLISH

  1. Framer toolbar → Publish → Connect stumpjerrysbrain.com
  2. SSL is handled automatically by Framer
  3. Set up the www redirect in your domain registrar's DNS settings (Framer's help docs cover this for every major registrar)

First publish checklist: [ ] Fonts loading correctly in preview [ ] Ticker animating smoothly [ ] FAQ accordion opening/closing [ ] Scroll reveals triggering [ ] Form submitting (test with a real submission) [ ] OG image showing correctly (use opengraph.xyz to preview) [ ] Mobile layout not broken at 390px [ ] Custom cursor not showing on mobile (add media query to disable)

QUICK REFERENCE: HTML PROTOTYPE → FRAMER MAPPING

The HTML prototype (index.html) is your design source of truth. If you're ever unsure how something should look, open it in Chrome and use DevTools to inspect the exact values.

Key things to check in DevTools:

The HTML file can also be hosted as-is on Netlify (drag the file to netlify.com/drop) as a live preview while the Framer build is in progress. This gives you something real to share with collaborators or clients before the Framer site is complete.

ESTIMATED BUILD TIME

Phase Time
Setup (fonts, colors, code) 20 min
Import SVG assets 10 min
Nav + Hero 45 min
Ticker + Story section 30 min
How It Works + Brain Demo 30 min
Offers tier stack 40 min
Testimonials + FAQ + Booking + Footer 45 min
Scroll animations 20 min
Code components 30 min
Form setup + SEO + OG image 20 min
Mobile responsive fixes 30 min
Total ~5.5 hours

This assumes you're comfortable with Framer's canvas. If it's your first Framer project, add 2 hours for getting oriented.

ONE LAST THING

The HTML prototype is production-quality and fully self-contained. If you want to launch immediately while building the Framer version properly: drop index.html on Netlify Drop (netlify.com/drop) right now. It will be live in 60 seconds at a Netlify subdomain. Point your domain at it while you build in Framer. No shame in shipping the HTML version first.