@aiwithcasti
The Elements That
Make a 10K Website
Cursor effects · Menu effects · Infinite carousels
Micro-interactions · Typography systems · AI workflows
A practical reference — not a guru PDF. Real code, real tools, real output.
WHAT'S INSIDE
Table of Contents
01
Cursor Effects
Make every mouse move feel intentional
02
Menu Effects
Navigation that actually impresses
03
Infinite Carousel
Seamless, smooth, auto-scrolling sections
04
Micro-interactions
The details that separate good from great
05
Typography System
Text that looks like it cost money
06
AI Workflow with Cursor
Prompt → deploy in one session
07
Checklist & Launch
What every 10K site has before going live
★
Bonus: Shape Blur
The glowing cursor-reactive blur effect
01
CURSOR EFFECTS
Cursor Effects
A custom cursor is the first thing visitors notice — it signals craft. Here's what agencies build and how
you replicate it with AI.
Types of cursor effects
Magnetic cursor — The cursor snaps and pulls toward interactive elements (buttons, links). Creates a
tactile feel.
Trail / blob cursor — A glowing or fluid shape follows the pointer with a slight lag. Common on creative
agencies.
Spotlight cursor — Dark background with a circle of light following the cursor. Great for portfolio or
landing pages.
Custom SVG cursor — Replace the default arrow entirely with a branded icon or dot.
CSS — Spotlight cursor (paste into your globals.css)
body { cursor: none; }
.cursor {
position: fixed; pointer-events: none; z-index: 9999;
width: 24px; height: 24px; border-radius: 50%;
background: rgba(123,94,167,0.6);
transform: translate(-50%, -50%);
transition: transform 0.1s ease, width 0.2s, height 0.2s;
}
JS — Attach cursor movement
const cursor = document.querySelector('.cursor');
document.addEventListener('mousemove', e => {
cursor.style.left = e.clientX + 'px';
cursor.style.top = e.clientY + 'px';
});
// Hover effect on buttons
document.querySelectorAll('a,button').forEach(el => {
el.addEventListener('mouseenter', () =>
cursor.style.transform = 'translate(-50%,-50%) scale(2)');
el.addEventListener('mouseleave', () =>
cursor.style.transform = 'translate(-50%,-50%) scale(1)');
});
■ PRO TIP
Prompt Cursor AI: 'Add a magnetic cursor effect to all .btn elements using GSAP'
02
MENU EFFECTS
Menu Effects
Navigation is visited on every page. A premium menu is one of the highest-ROI design decisions
you'll make.
Fullscreen overlay menu
Menu opens full screen with staggered text
animations. Used by luxury and creative brands.
Slide-in drawer
Panel slides in from left or right. Works on desktop
and mobile. Clean and practical.
Mega menu with hover preview
Hovering a nav item reveals a rich panel with
images and descriptions.
Sticky + hide-on-scroll
Navbar hides on scroll down, reappears on scroll
up. Saves vertical space.
Fullscreen menu — core structure
HTML skeleton
<nav class='nav'>
<button class='menu-toggle'>Menu</button>
<div class='menu-overlay'>
<ul class='menu-links'>
<li><a href='/'>Home</a></li>
<li><a href='/work'>Work</a></li>
<li><a href='/contact'>Contact</a></li>
</ul>
</div>
</nav>
■ PRO TIP
Ask Cursor AI: 'Animate the menu links with a stagger effect using Framer Motion'
03
INFINITE CAROUSEL
Infinite Carousel
Also called a marquee or ticker. Shows logos, testimonials, or service tags in a seamless,
auto-scrolling loop. Zero JS required with CSS alone.
HTML — duplicate the track for seamless loop
<div class='marquee'>
<div class='track'>
<span>Webflow</span><span>Framer</span><span>Next.js</span>
<!-- Duplicate items for seamless loop -->
<span>Webflow</span><span>Framer</span><span>Next.js</span>
</div>
</div>
CSS — pure CSS infinite scroll
.marquee { overflow: hidden; white-space: nowrap; }
.track {
display: inline-flex; gap: 48px;
animation: scroll 20s linear infinite;
}
@keyframes scroll {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
/* Pause on hover */
.marquee:hover .track { animation-play-state: paused; }
Variations to try
→ Reverse direction (right → left vs left → right) for visual tension.
→ Two rows scrolling in opposite directions (logo wall effect).
→ Image cards instead of text — client logos, project thumbnails.
→ Slow scroll for testimonials, fast for tech stack logos.
■ PRO TIP
Prompt: 'Create a vertical infinite carousel of testimonial cards with pause on hover'
04
MICRO-INTERACTIONS
Micro-Interactions
These are the tiny animations that make users feel the interface is alive. They're also what clients can
never name — but always notice.
Button hover state
Scale up slightly + shadow deepens + color shifts.
Takes 3 CSS lines.
Form input focus ring
Input glows with brand color on focus. Feels
custom and intentional.
Loading skeleton
Gray animated bars while content loads. Signals
quality, reduces perceived wait.
Scroll-triggered reveal
Elements fade in as they enter viewport. Used on
every premium site.
Like / toggle animation
Button morphs state with a spring animation. Keep
it under 300ms.
Toast notifications
Small slide-in message confirms user action.
Reassures and guides.
CSS — Scroll-triggered reveal (add class via IntersectionObserver)
.reveal {
opacity: 0;
transform: translateY(28px);
transition: opacity 0.6s ease, transform 0.6s ease;
}
.reveal.visible {
opacity: 1;
transform: translateY(0);
}
JS — IntersectionObserver to trigger reveal
const observer = new IntersectionObserver(entries => {
entries.forEach(e => {
if (e.isIntersecting) {
e.target.classList.add('visible');
observer.unobserve(e.target); // fire once
}
});
}, { threshold: 0.15 });
document.querySelectorAll('.reveal')
.forEach(el => observer.observe(el));
05
TYPOGRAPHY SYSTEM
Typography System
Bad typography is the #1 thing that makes a site look cheap. A proper scale + pairing makes it look
like it cost twice what it did.
Font pairing formula that works
Display (headlines): Clash Display, Syne, PP Editorial — makes a statement
Body (reading): Inter, Plus Jakarta Sans, DM Sans — clean and legible
Mono (code / tags): JetBrains Mono, Geist Mono — signals technical credibility
CSS — Fluid type scale (no media queries needed)
:root {
--text-sm: clamp(0.8rem, 1.5vw, 0.9rem);
--text-base: clamp(1rem, 2vw, 1.1rem);
--text-lg: clamp(1.2rem, 2.5vw, 1.4rem);
--text-xl: clamp(1.5rem, 3vw, 2rem);
--text-2xl: clamp(2rem, 5vw, 3.5rem);
--text-3xl: clamp(2.5rem, 7vw, 5rem);
}
h1 { font-size: var(--text-3xl); line-height: 1.1; }
h2 { font-size: var(--text-2xl); line-height: 1.2; }
p { font-size: var(--text-base); line-height: 1.7; }
■ PRO TIP
Load fonts via Fontshare.com or Bunny Fonts — free, fast, and privacy-friendly.
06
AI WORKFLOW WITH CURSOR
AI Workflow with Cursor
Cursor is an AI-native code editor. Used right, you can go from blank project to deployed site in a
single session.
The 5-step AI build loop
1.
Scaffold
Cmd+K → 'Create a Next.js app with Tailwind and shadcn/ui'
2. Layout
Cmd+K on the file → 'Add a sticky navbar + hero section with CTA button'
3. Effects
Select a component → Cmd+K → 'Add a scroll-triggered fade-in using Framer Motion'
4. Polish
Ask: 'Review this CSS for spacing inconsistencies and fix them'
5. Deploy
Push to GitHub → connect to Vercel → live in 2 minutes
Useful Cursor AI prompts
→ "Build an infinite horizontal logo scroll with pause-on-hover using pure CSS"
→ "Add a fullscreen overlay menu with GSAP stagger animation on the links"
→ "Refactor this component to add a magnetic hover effect on the button"
→ "Make all section titles use a fluid clamp() type scale"
→ "Add skeleton loading state to this card grid component"
07
CHECKLIST & LAUNCH
10K Site Checklist
Every element on this list is present on sites that sell for $10K+. Use it as your QA before any
delivery.
Visual Polish
■ Custom cursor (not default arrow)
■ Consistent spacing system (8px grid)
■ Fluid typography with clamp()
■ At least 2 scroll-trigg