Motion and interaction, built by hand.

A navigation bar, cards and controls that look like real glass. The background warps at the edges as you drag or scroll past.

• SVG displacement filters for the refraction, no images
• GSAP Draggable for the cards, with inertia when you let go
• Falls back to a plain frosted panel where filters are not supported

Product launches and app landing pages that need a modern first look.

Skills: SVG filters / GSAP / Draggable

Pills drop into a box, stack on each other and react to your mouse. Grab one and throw it and the others move out of the way.

• A small 2D physics loop with gravity, friction and collisions
• Pointer events for grab and throw on mouse and touch
• The pills are real text, so screen readers and search engines still read them

About pages, hiring pages and skill sections that should feel playful without being silly.

Skills: Physics / Pointer events / Canvas

Hundreds of dots sit in a grid and push away from the cursor, then spring back into place.

• One canvas, redrawn only while the section is on screen
• Spring maths, so the dots settle naturally instead of snapping
• Density drops on phones to keep it at 60 fps

Hero backgrounds for tech, AI and data products.

Skills: Canvas / Spring physics / Performance

A headline is drawn as thousands of particles. Hover and they scatter, move away and they rebuild the word, or morph into the next one.

• The text is sampled into points from an off-screen canvas
• Each particle eases back to its own home point
• Real text stays in the page for SEO and accessibility

Launch pages and event sites where the headline is the show.

Skills: Canvas / Typography / Easing

Images tile endlessly in every direction. Drag it and it keeps gliding with momentum, and columns move at slightly different speeds.

• Tiles are reused as you drag, so it never builds up memory
• GSAP Inertia for the throw and slow stop
• Keyboard arrows move it too

Portfolios, studios and photographers who have a lot of work to show.

Skills: GSAP Inertia / Virtualisation / Drag

Switch from grid to list, filter the items, or open a card into a detail view. Everything slides to its new place instead of snapping.

• GSAP Flip records the old layout and animates to the new one
• Works with Webflow CMS lists without extra markup
• Focus moves correctly when a card opens

Shops, resource libraries and blogs with filters.

Skills: GSAP Flip / CMS / Accessibility

Each letter gets heavier or wider depending on how close the cursor is and how fast you scroll.

• Variable font axes controlled per letter
• Values are smoothed so the wave feels soft, not jumpy
• Only runs while the heading is in view

Agency sites and brands with strong typography.

Skills: Variable fonts / SplitText / Scroll speed

A line of text wraps around a ring in 3D and turns as you scroll. Speed up the scroll and it spins faster.

• Pure CSS 3D transforms, no WebGL needed
• Scroll velocity feeds the rotation through GSAP
• Works as a section divider or a hero

Event pages and brand sites that want a bold moment between sections.

Skills: CSS 3D / ScrollTrigger / Velocity

A path draws through the page as you scroll, with a small object riding along it and stopping at each step.

• GSAP DrawSVG for the line and MotionPath for the rider
• Steps are normal Webflow sections, easy to edit
• Path redraws correctly on every screen size

Process pages, timelines and onboarding stories.

Skills: DrawSVG / MotionPath / ScrollTrigger

The menu opens with a soft wave instead of a hard slide, and the links rise in one after another.

• SVG path morphing timed with GSAP
• Focus is trapped inside the menu and Esc closes it
• Respects reduced motion settings

Creative agencies and personal sites that want navigation with character.

Skills: SVG morph / GSAP / Accessibility

Images start as big blocks of colour and resolve into the sharp photo as they scroll into view.

• The image is drawn at shrinking pixel sizes on a canvas
• The real image tag stays underneath for SEO
• Loads lazily, so there is no speed cost

Games, tech brands and retro-style product pages.

Skills: Canvas / Lazy loading / ScrollTrigger

The hero word grows as you scroll until you pass through a letter and land in the next section.

• A pinned section driven by ScrollTrigger scrub
• Scale and mask are timed so the text never blurs
• The next section is already loaded underneath

Big launches and campaign pages that open with a statement.

Skills: ScrollTrigger / Pinning / Masks

A sequence of frames plays as you scroll, so the product rotates or assembles in front of you.

• Frames are preloaded in small batches and drawn on a canvas
• Scroll position picks the frame, so it never drifts
• Uses lighter frames on phones

Hardware, consumer products and SaaS feature tours.

Skills: Canvas / Image sequences / ScrollTrigger

A carousel where the cards skew and bend a little when you drag or scroll fast, then settle when you stop.

• Drag speed is measured and turned into a skew value
• GSAP Draggable with snapping to each card
• Works with CMS items

Case study sliders, team sections and product rows.

Skills: Draggable / Velocity / CMS

Throw the top card and it arcs to the back of the stack. It can also fan out so you see every card.

• Each throw follows a curved path with GSAP
• Swipe on mobile, click or arrow keys on desktop
• The order is real DOM order, so it stays accessible

Testimonials, pricing tiers and feature highlights.

Skills: GSAP / Gestures / Accessibility

Move the mouse and images appear along your path, stretch in the direction you move and fade away.

• A small pool of images is reused, so it stays light
• Stretch comes from the cursor's speed and direction
• Turned off on touch screens

Creative studios, fashion and photography sites.

Skills: Pointer tracking / GSAP / Object pools

Panels slide in like curtains, with a counter or shape wipe, when you move between sections or views.

• GSAP timelines with clip-path wipes
• Works between sections or as page transitions
• Content underneath is never hidden from readers

Portfolios and storytelling pages with clear chapters.

Skills: Clip-path / Timelines / Transitions

A circular lens follows the cursor and zooms into images or interface details.

• A second scaled layer is masked into a circle
• Position is smoothed so the lens glides
• Pinch-friendly fallback on phones

Product detail pages and app screenshots with small details.

Skills: Masks / Pointer / Smoothing

Headlines scramble through random characters before settling, and a terminal line types out below.

• GSAP ScrambleText with a custom character set
• Typing speed varies a little so it feels human
• The final text is real and readable from the start

Developer tools, security and tech products.

Skills: ScrambleText / Timelines / Typography

The cursor is a soft blob that stretches toward links and seems to melt into buttons on hover.

• An SVG goo filter merges the blob with the button
• The blob follows with a small delay for weight
• Only on devices with a mouse

Playful brands, creative agencies and product sites for designers.

Skills: SVG filters / Cursor / GSAP

Cards lean toward the mouse with a soft light moving across them, and flatten out when you leave.

• CSS 3D transforms driven by GSAP quickTo for smooth updates
• Light follows the tilt angle
• No tilt on touch devices

Pricing cards, team cards and feature grids.

Skills: CSS 3D / GSAP / quickTo

Logo walls and text bands that loop without a gap, and speed up or reverse with your scroll.

• Content is cloned just enough to fill the screen
• Speed reacts to scroll velocity
• Pauses on hover so people can read

Client logos, reviews and announcement bars.

Skills: GSAP / ScrollTrigger / Loops

Each card sticks and the next one slides over it, while the one below shrinks back a little.

• Native Webflow sticky positioning with GSAP scaling
• No scroll-jacking, the page scrolls normally
• Card count can change without code edits

Service lists, process steps and feature stories.

Skills: Sticky / ScrollTrigger / Webflow IX

Links lean toward the mouse like magnets, and the bar hides on scroll down and returns on scroll up.

• GSAP quickTo for the magnetic pull
• Scroll direction logic with a small threshold
• Fully keyboard accessible

Any site that wants its navigation to feel alive.

Skills: GSAP / quickTo / Navigation

Headlines and links scramble through letters before landing on the real word.

• ScrambleText with custom characters and speed
• Hover version for links, scroll version for headings
• Real text is always in the page

Tech brands and portfolios that want a sharp, technical feel.

Skills: ScrambleText / GSAP / Hover

Call-to-action buttons with a light that travels around the border or sweeps across the surface.

• Conic gradients animated with CSS custom properties
• No JavaScript needed for the base effect
• Contrast stays readable in every state

Main calls to action on landing pages.

Skills: CSS / Gradients / Custom properties

Items open one after another with a progress bar, and each one can swap an image beside it.

• A GSAP timeline controls open, progress and swap
• Pauses when you hover or focus
• Built on a native Webflow structure

Feature explainers and FAQ sections.

Skills: Timelines / Accessibility / Webflow

The page scrolls down but the content moves sideways, like a film strip, with parallax inside each panel.

• ScrollTrigger pin and scrub
• Panel count comes from the layout, not the code
• Stacks vertically on phones

Timelines, case study strips and product tours.

Skills: ScrollTrigger / Pinning / Parallax

Click a tile and it grows into a full detail view, while the rest of the grid moves aside.

• GSAP Flip for the expand and close
• Deep-linkable, so a tile can open from a URL
• Esc and back button close it

Feature overviews and service pages.

Skills: GSAP Flip / Layout / UX

A glow follows the mouse across the grid and lights up card borders as it passes.

• One CSS variable updated on pointer move
• Borders use a masked gradient
• Very light, no canvas

SaaS feature grids and dark-theme product sites.

Skills: CSS variables / Gradients / Pointer

A dot and ring cursor that grows, inverts colours or shows a label depending on what is under it.

• GSAP quickTo for smooth follow
• Data attributes on elements choose the cursor state
• Hidden on touch devices

Portfolios and agency sites.

Skills: GSAP / Data attributes / Cursor

Digits roll into place one column at a time, for stats, prices or countdowns.

• Each digit is its own rolling column
• Counts start when the numbers come into view
• Real number is available to screen readers

Stats rows, pricing and launch countdowns.

Skills: GSAP / Typography / IntersectionObserver

Menus and selects that open with a blur panel and a soft spring.

• Backdrop blur with a solid fallback
• Keyboard navigation with arrows and Esc
• Spring timing tuned by hand

Navigation menus and language pickers.

Skills: Backdrop filter / Keyboard / GSAP

A perspective grid with beams that scan, pulse and cross each other.

• Drawn on canvas with a simple perspective projection
• Pauses when off screen
• Colours come from site variables

Tech, gaming and security hero sections.

Skills: Canvas / Perspective / Performance

Tap the button and actions fan out around it in a circle, for sharing or quick tasks.

• Positions are calculated on a circle, so any number fits
• Staggered GSAP entrance
• Arrow keys move between actions

Share menus, floating action buttons and quick tools.

Skills: GSAP / Geometry / Keyboard

A video or 3D globe that plays as you scroll and reverses when you scroll up.

• Scroll position is mapped to video time
• Encoded for fast seeking
• A poster image loads first

Product stories and brand films.

Skills: Video / ScrollTrigger / Encoding

Hover an image and it ripples, waves or melts into the next image.

• Displacement map animated on hover
• Only the hovered image runs the effect
• Plain image swap as fallback

Galleries, product cards and team photos.

Skills: Displacement / Canvas / Hover

Footage plays inside huge type, and grows to full screen as you scroll.

• CSS text clipping with a video layer
• Scale is scrubbed with ScrollTrigger
• Text stays selectable

Brand intros and campaign heroes.

Skills: Masks / Video / ScrollTrigger

A 3D model rotates with scroll or drag, and can be used as a product viewer.

• three.js with a small, optimised model
• Only renders while visible
• Static image fallback

Product pages and tech brands.

Skills: three.js / WebGL / Performance

Swipe or drag cards left and right, with a stack behind that moves up.

• GSAP Draggable with Inertia for the throw
• Buttons and arrow keys as alternatives
• Works with CMS content

Testimonials, quizzes and product pickers.

Skills: Draggable / Inertia / CMS