Page builders won. Wix, Squarespace, Webflow, and Framer cover most small business needs in an afternoon. So why would anyone still hand-code a marketing site in 2026?
We run Blackstone Motion, a motion-first web studio. We build custom sites for service businesses, hospitality, and local brands that outgrew their template but do not need a full product engineering team. This is when hand-coded HTML, CSS, JavaScript, and GSAP still make sense, and when they do not.
Templates optimize for launch, not for your funnel
Most template sites solve one problem: existence. You get a domain, hours, a contact page, and something that looks acceptable on a phone.
They rarely solve:
- One clear action repeated on every scroll depth (call, book, order)
- Mobile hierarchy that matches how people actually decide (trust, offer, proof, action)
- Performance once you stack widgets, chat bubbles, pop-ups, and third-party embeds
- Brand specificity beyond font and color swaps
For a solo operator testing an idea, templates are fine. For a business where the site is the primary salesperson, the template becomes a ceiling.
What hand-coding buys you
Hand-coded does not mean reinventing React for a bakery site. It means you control the document, the layout, and the motion layer without fighting a builder export.
1. Semantic structure you can reason about
You choose the heading order, landmarks, and link text. That helps accessibility, SEO basics, and future refactors. Builders often output nested div soup that is hard to tune without breaking the editor.
2. Motion that serves content, not decoration
We use GSAP with ScrollTrigger for entrances, pinned sections, and scrubbed reveals. The goal is to guide attention, not to animate everything because we can.
A typical pattern for a service homepage:
- Hero: short timeline on load (headline, subcopy, CTA)
- One pinned or scrubbed section that explains the offer
- Light section entrances elsewhere
-
prefers-reduced-motionrespected throughout
That is hard to do well in a generic builder without heavy embeds or brittle custom code blocks.
3. Performance you can actually measure
Transform and opacity animations, lazy-loaded media, no unused framework bundle for a four-page marketing site. A hand-coded marketing build can stay lean in a way that full-stack SPA or bloated theme stacks often do not.
4. Design that cannot be mistaken for the neighbor's site
Templates cluster by vertical. Two dentists in the same zip code can have the same Wix skin. Custom layout, type rhythm, and photography treatment are how a local brand looks intentional instead of placeholder.
A minimal GSAP pattern (scroll section)
This is simplified from how we structure client builds. It is not drop-in for every project, but it shows the idea: one ScrollTrigger section, scrubbed progress, reduced motion fallback.
<section class='story-pin' aria-label='How we work'>
<div class='story-pin__track'>
<div class='story-pin__panel story-pin__panel--one'>Discovery</div>
<div class='story-pin__panel story-pin__panel--two'>Design</div>
<div class='story-pin__panel story-pin__panel--three'>Build</div>
</div>
</section>
.story-pin {
position: relative;
min-height: 100vh;
}
.story-pin__track {
display: grid;
gap: 1rem;
}
.story-pin__panel {
padding: 2rem;
border: 1px solid #222;
}
import gsap from 'gsap';
import { ScrollTrigger } from 'gsap/ScrollTrigger';
gsap.registerPlugin(ScrollTrigger);
const prefersReduced = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
if (!prefersReduced) {
const panels = gsap.utils.toArray('.story-pin__panel');
gsap.timeline({
scrollTrigger: {
trigger: '.story-pin',
start: 'top top',
end: '+=120%',
pin: true,
scrub: 0.6,
},
})
.from(panels, { y: 40, opacity: 0, stagger: 0.2, duration: 1 });
}
On client projects we split modules, scope with gsap.context(), and refresh ScrollTrigger after fonts and images load. The point is: the motion is code you own, not a plugin slot fighting the rest of the page.
When a page builder is the right call
Be honest:
- Tight budget, need live this week: use a builder or a solid theme
- Owner will edit copy weekly: Webflow or similar may beat custom if they need visual editing
- No brand assets yet: design and content work matter more than custom code
- Internal tool or MVP: ship the stack your team already knows
We turn down or defer projects that fit better as a $500 template job. Hand-coded motion work starts where clarity, craft, and conversion matter more than time-to-publish.
What a custom marketing build usually includes
For a typical 3 to 5 page service site at our studio:
- Written brief (goals, pages, references, timeline, budget range)
- Figma frames for key breakpoints
- Hand-coded responsive build
- GSAP tier matched to scope (light entrances vs pinned storytelling)
- Staging URL, two async revision rounds, launch handoff
We work async by email. No calls. Decisions stay in writing so nothing gets lost between a Zoom and a random text message.
If you are comparing options for your business
Ask any developer or studio:
- Who owns the code after launch?
- What happens to performance if we add a chat widget and a booking embed?
- How is motion scoped so it does not hurt mobile load?
- What is included in revisions?
- Can you show a live preview on a staging URL before we pay the balance?
If they cannot answer in plain language, that is a signal.
See the approach live
Our portfolio is hand-coded with the same patterns we use on client work:
https://blackstone-motion.vercel.app
If you are planning a rebuild from Wix, GoDaddy, or a dated WordPress theme and want a motion-first marketing site, send a one-paragraph brief through the contact form or email xzavian.suarez2012@gmail.com with pages, timeline, and rough budget range. We reply in writing with next steps.
Blackstone Motion is a motion-first web studio based in New England, US. We build custom sites with GSAP, semantic HTML, and modern CSS. Remote clients welcome.
Top comments (0)