Frontend vocabulary / for Gemini prompts
Twenty common patterns and motion effects you see on hot portfolio sites — with the exact words to tell Gemini when you want one.
/ Contents
Layout / 01
Tiles of different sizes packed into one asymmetric grid. Feels like a dashboard, loved by Apple, Linear, Vercel.
Say to Gemini
Arrange the projects in a bento-box grid with varied tile sizes — one big feature tile plus smaller supporting tiles.Layout / 02
A row of cards you swipe/drag sideways. Uses CSS scroll-snap-type: x mandatory. Great for projects.
Say to Gemini
Render the projects section as a horizontal scroll-snap slider with portrait cards. Users drag to see more.Layout / 03
Fifty-fifty landing page: name/manifesto on one side, a large image or video on the other.
Say to Gemini
Split the hero 50/50 — name and tagline on the left, a large portrait image or looping reel on the right.Layout / 04
A muted autoplay video (or animated image) fills the entire viewport with the name overlaid. Maximum cinematic energy.
Say to Gemini
Full-viewport hero with a muted autoplay background video behind the name. Add a dark gradient overlay for contrast.Layout / 05
A thin left column with a section number/label that sticks while the content scrolls past it. Scroll inside the demo →
Say to Gemini
Add a sticky left sidebar showing the section number and label in mono font. Stays pinned as the main content scrolls.I build real-time visual systems for dance, theater, and live music. My work lives at the edge where Houdini meshes with TouchDesigner and Unreal Engine.
Generative. Responsive. Made to be felt in a room. Currently researching camera-tracked projection for site-specific performance at NYU ITP.
Scroll inside this box to watch the section label stay pinned to the top while the text moves. That's position: sticky; top: 20px.
Used in editorial sites like Godly.website, Read.cv, and most long-form magazine layouts. Cheap, no JavaScript needed.
Pair it with a second sticky column on the right and you get a classic asymmetric editorial layout.
Layout / 06
The Pinterest layout — columns of equal width, items flow top-to-bottom at their natural heights. Good for mixed-aspect imagery.
Say to Gemini
Render the projects as a masonry grid with varied image heights, using CSS columns.Layout / 07
On hover the image scales, a colored overlay fades in, the arrow button moves, and the title changes color. Four small changes add up to one strong interaction. Hover the card →
Say to Gemini
On hover, scale the project image 1.06x and fade in a red multiply overlay with the title sliding up and changing color.Hover me
Layout / 08
A sticky table of contents that highlights the current section as you scroll. Helps with long pages. Scroll inside →
Say to Gemini
Add a sticky scroll-spy table of contents in the left sidebar that highlights the currently visible section in red.The scroll-spy TOC listens to which section is in view and highlights the matching link. Uses IntersectionObserver.
When this block enters the viewport, the "02 / Work" link turns red. No libraries needed, about 15 lines of JavaScript.
Used by long-form editorial sites, documentation pages, and any portfolio with named sections.
The final section — once you reach here, the TOC is done and the user has a clear sense of where they've been.
Layout / 09
One column stays pinned while the other scrolls past. Pure position: sticky, no JavaScript. Scroll inside →
Say to Gemini
Pin the project title on the left with position: sticky while a stack of detail cards scrolls past it on the right.Layout / 10
Collapsible sections that expand on click. Native <details> element — no JS needed. Use for skills, FAQ, credits. Click →
Say to Gemini
Render the skills as a native HTML accordion using <details>/<summary>, with the first item open by default and a red +/− icon.Houdini · Unreal Engine · TouchDesigner · Blender
Python · JavaScript · GLSL · C++
Projection mapping · Motion capture · Audio
Motion / 01
Elements fade up when they enter the viewport, staggered slightly so it feels cinematic. Built with IntersectionObserver — the base layer of every modern portfolio.
Say to Gemini
Fade sections in on scroll using IntersectionObserver with threshold 0.1, 900ms ease-out, 120ms stagger between siblings.Motion / 02
The background moves slower than the foreground, creating depth. Use sparingly — a subtle 0.3× multiplier is plenty.
Say to Gemini
Add a subtle parallax effect where the hero image moves at 0.3x the scroll speed. Use a single requestAnimationFrame loop.Motion / 03
The headline reveals word-by-word from below a clip. Wrap each word in a mask, translate the inner span. Classic on-load animation.
Say to Gemini
Animate the hero headline with a staggered word-by-word reveal — each word clipped and sliding up, 100ms between words.Motion / 04
The button eases toward the cursor when it gets close. A tiny detail that makes CTAs feel alive. Hover the button →
Say to Gemini
Make the contact button magnetic — translate it toward the cursor when the cursor is within 80px, with a 0.3x strength and spring easing on reset.Hover me
Motion / 05
Hide the native cursor and replace it with your own shape — a circle, a dot, a crosshair. Adds instant "this site is custom-built" energy. Hover the dark box →
Say to Gemini
Replace the default cursor with a 34px red outlined circle that follows the mouse with slight easing. Hide the native cursor on desktop only.Hover inside this box.
Motion / 06
Images don't just fade in — they're "wiped" from one side with a clip-path: inset() animation. Feels editorial, filmic.
Say to Gemini
Reveal project images on scroll with a clip-path wipe from left to right, 1.6s ease-in-out curve, triggered by IntersectionObserver.Motion / 07
Scroll position directly drives a transform — scale, rotate, opacity. Unlike fade-in, it ties the animation progress to scroll amount. Scroll past the slide →
Say to Gemini
As the user scrolls past the hero, scale the big headline from 1.0 to 0.6 and fade its opacity from 1 to 0.4, tied directly to scroll progress.Scroll past me
Motion / 08
Text scrolls sideways forever — one direction on one row, the opposite direction on another. Pure CSS keyframes with a duplicated track. Strong editorial vibe.
Say to Gemini
Add a two-row marquee strip under the hero — big headline text scrolling left on top, smaller mono labels scrolling right on the bottom, both looping infinitely.Motion / 09
The card rotates subtly on two axes following the cursor. Use perspective + rotateX/Y. Max 8° or it feels gimmicky. Hover the card →
Say to Gemini
Add a 3D tilt effect to project cards — rotateX and rotateY based on cursor position, max 8 degrees, with 500ms ease-out on mouseleave.Hover the card
Motion / 10
A line or signature "draws itself" by animating stroke-dashoffset. Great for underlines, signatures, and hand-drawn arrows.
Say to Gemini
Draw an animated underline beneath the hero name using an inline SVG path with stroke-dasharray and stroke-dashoffset animation on scroll-in.Maya Chen
/ Next
Every effect you just saw is on 100 other sites. When you find one you love, inspect it, name it, tell Gemini.
Where to browse: godly.website · siteinspire.com · awwwards.com
Back to the workshop slides → slides.html