Premium motions in Next.js: the 18 patterns of the Plantica site, step by step
The animation architecture of the Plantica site, broken down into 18 motion patterns with a ready-made implementation prompt for each one.
- motion
- gsap
Page 4 of 4
All posts
Premium motions in Next.js: the 18 patterns of the ANAI site, step by step
The hybrid architecture of the ANAI site, with CSS vars, per-section tweens and canvas, broken down into 18 motion patterns with ready-made prompts.
- motion
- gsap
Premium motions in Next.js: the 15 patterns of the Studio Modular site, step by step
The componentized architecture of the Studio Modular site: gated modules, native scroll and cutting-edge CSS, in 15 motion patterns with ready-made prompts.
- motion
- gsap
Premium motions in Next.js: the 16 patterns of the Beetogreen site, step by step
The per-section state architecture of the Beetogreen site, with minimal GSAP, maximal CSS and replay by key, in 16 motion patterns with ready-made prompts.
- motion
- gsap
Premium motions in Next.js: the 17 patterns of the InterGest Canada site, step by step
GSAP, Framer Motion and Embla on the same site without fighting: the 17 motion patterns of the InterGest Canada site in Next.js, each with a ready-made prompt.
- motion
- gsap
Instituto +Brasal redesign — stacks D, E and F (with a reference) · v3
Three redesign stacks with a design reference, redone once DESIGN.md and the motion guide existed: what each got right, what broke and the prompt at each step.
- process
- skills
- part 2/2
Motion •
Motion Design for the Web: The Complete Guide
Scroll, text, images and video: the complete catalog of motion techniques for the web, with implementation in Next.js and the cases where each one pays off.
- motion
- scroll
Instituto +Brasal redesign — complete documentation of the process
From analyzing the skills catalog to running six competing stacks on the Instituto +Brasal redesign, with every prompt used and what each stack delivered.
- process
- skills
- part 1/2
Skill stacks for blog articles that rank well on Google
Three Claude Code skill stacks for writing articles that rank on Google and get cited by AI: research, drafting and review, with the role of every skill.
- skills
- seo
Infra •
Documentation: deploying a Next.js application with GitHub + Hostinger
Every push becomes a live site with no hosting panel involved: connecting GitHub to Hostinger, the build settings that break and the checks after each deploy.
- deploy
- github
The definitive guide — a Next.js site built around motion and scroll
The scroll foundation that, when missing, keeps the animations from working at all: Lenis, GSAP and Next.js wired in the right order and the mistakes to avoid.
- next.js
- lenis