What I wish someone had explained to me.
The whole method, in five lessons: why execution sets the price, the plan before the code, the twelve places where a generated result falls apart, what to do when it fails, and the words that change the result.
Nothing is locked on this page. The effects are paid, the method is not: it is only worth something if you use it.
The price of a site is not visible in its code.
That is the first thing to accept, and it goes against intuition: a €50,000 site and a €500 site run on the same technology. Same framework, same tools, often the same libraries. The gap is entirely in the execution, meaning four things nobody teaches: spacing, hierarchy, rhythm and restraint.
- Perception
- Trust
- Clarity
- Brand positioning
That is what your client buys, in that order. Never the code: a feeling. Keep the two classic figures from design research for your meetings, they land every time: the decision forms in 50 ms, and most of the first impression comes from the visuals alone.
Write the plan before you open the editor
One line per section, before touching the code or running a prompt. I know it is the step everyone skips. Yet it decides the result: without a plan, a model falls back to its default gravity, the average template it has seen ten thousand times. Nine sections, in this order.
- Hero: identity
- Who, what, why care. Nothing else competes for attention.
- Proof / credibility
- Work, examples, numbers. Prove before you sell.
- Invitation
- Project the visitor into a desirable future, do not describe a service.
- Active exploration
- Give them control: filter, slider, product navigation.
- Reassurance
- Show you stay with them afterwards, not just that you sell.
- Lead capture
- Only here, never before. One field, one CTA.
- Authority
- The statement that justifies the premium positioning.
- Final CTA
- Elegant tone, soft transition. No hard sell.
- Complete footer
- Logo, address, grouped links, socials. No dead ends.
Run this test on every section before keeping it: “what does it prove that the previous one did not, and where does it push next?” If you have no answer, cut it. A short page that moves forward beats a long page that stalls.
The twelve places where a generated result falls apart
Reread this list before every delivery or demo. There is nothing theoretical about it: these are the twelve precise places where an automatic result goes off the rails, always the same ones. Fix them and your page changes category, without a single extra line of code.
- One CTA per section
- Two CTAs = diluted attention, so zero conversion.
- Restricted palette
- 2 to 3 colours. Often one neutral + one accent.
- Generous white space
- Emptiness is not a lack: it is the signal of quality.
- 2-3 levels of type hierarchy
- Title → subtitle → body. No more.
- Images that anchor
- Never generic stock: the image must tell something.
- Discreet micro-interactions
- Animated underline, field focus, slight scale. No gimmicks.
- Slow, deliberate transitions
- Never a snap or an abrupt bounce.
- Animation order respected
- Title → subtitle → image → CTA, 0.25 to 0.5 s apart. Never all at once.
- Repeatable section pattern
- The same structure reused from one section to the next.
- Unambiguous nav labels
- Nobody should have to guess what is behind them.
- Static grid over auto slider
- Clarity beats perceived variety.
- Custom details
- Scrollbar, selection, cursor. The micro-polish that sets you apart.
When it fails, do not rerun the prompt
Everyone’s reflex: rerun and hope for better. It is the worst method, and it costs hours. A failed result is almost never a model failure, it is an under-described prompt. So put the keyboard down, name the problem, and fix one layer at a time.
Sort the problem: Layout · Animation · Interaction · Visual polish.
Then fix it in this order: Structure → Motion → Interaction → Polish → Performance.
- Name the precise problem, never “it looks bad”.
- Control the scope explicitly: “keep the content”, “do not redesign, behaviour only”.
- One section at a time, referencing the previous one as the style base.
- If a section is still weak after several passes, rebuild it: persisting costs more.
The words that change the result
Here is the vocabulary I use, and why it works: a model has read designers’ documentation, not your approximations. Tell it “50/50 split-section” and it knows; tell it “put that in two columns” and it improvises. Use them as they are.
- Layout
- hero · spacer · divider · grid (n columns, ratio) · card · 50/50 split-section · visual break · multi-column footer
- Motion
- reveal animation · staggered motion · scroll-linked (reversible) · sequencing · easing / deceleration · color cross-fade · hover state · micro-interaction
- Feeling words
- slightly · subtle · smooth · natural · controlled · not aggressive · not distracting · award-winning style
Launch price
49 €19 €Excl. tax · your local VAT is added at checkout
One-time payment. No subscription, no renewal.
- The prompt and code of the 57 paid effectsCSS, GSAP, React. Fixed and commented, with the trap of each one noted and measured in the browser. The prompt, to rebuild it with your own AI.
- 8 standalone React componentsClipReveal, StickyPanels, ViewTransition and the others. Drop them into a Next project, with no dependency beyond GSAP.
- Commercial licenceClient projects included, with no limit. You resell the work, not the kit. Read the licence
- Updates includedThe catalogue grows, your access stays the same, and you never pay again.
You have already seen the goods. The 10 free effects on this site come with their full code, at the same level as the other 57. Judge the work before you pay: the code can be copied the moment it appears, so the purchase is final and non-refundable. If your key does not unlock anything, reply to your Gumroad confirmation email and I will fix it.
Unlocks instantly on this site, nothing to install.