01 / Variables
Edit Colors, Typography and Layout in Webflow Variables. Base changes cascade down; override only the responsive mode that needs a different value.
Template system / 03
Instructions
The shortest safe path to customize OBVIA while keeping responsive behavior, accessibility and motion intact.
02 / Works CMS
Add projects in the Works collection. Complete every required field, write meaningful image alt text and keep SEO titles and descriptions unique.
03 / Images
Use landscape images at least 2400px wide for project heroes. Compress before upload and keep the monochrome or acid-accent art direction consistent.
04 / Navigation
The mobile menu is one interaction on the toggle: the first click opens it, the second closes it, and tapping any menu link closes it too. Edit it in the Interactions panel under “Open and close the menu when the toggle is clicked”.
05 / Motion
Custom code runs one effect: the cursor photo trail in the hero. Every other reveal, hover, marquee and scroll sequence — the hero entrance and the word-by-word fills included — is a Webflow interaction with no code. The page loader is hidden by default so the Home page stays editable — see “The page loader” below.
06 / Publishing
Check all four responsive modes, keyboard navigation, reduced motion, CMS empty states and the Marketplace licenses page before publishing.
Page loader / 01
The page loader
The black intro overlay on the Home page is hidden by default, so it never covers the canvas while you work. A Webflow interaction turns it on when the page loads, plays the intro and takes it away again — the whole thing runs in 1.15 seconds. There is no code involved.
Editing what it says
- Open the Home page and find Preloader at the very top of the Navigator.
- Click the eye icon beside it to show it on the canvas. It is set to Display: none, which is why it is out of your way.
- Edit the wordmark and the studio line like any other text.
- Click the eye icon again to hide it. Leave it hidden. The interaction shows it on the published site, so hiding it here changes nothing for your visitors — and leaving it visible puts a black overlay back over your canvas.
The acid-lime hairline is the progress bar. It is a timed animation, not a real measure of loading, so nothing needs wiring up.
Making it shorter, longer, or slower
Interactions panel → Play the intro overlay and wipe it up on load. Six steps on one timeline, in seconds:
StepStart / DurationWhat it does
Show the overlay0 / —Sets Display to Flex. Without this step the overlay never appears.
Raise the wordmark0 / 0.5OBVIA® rises into its line.
Fade the studio line in0.12 / 0.35The small line under the hairline.
Fill the progress hairline0.15 / 0.45The acid-lime bar fills left to right.
Wipe the overlay up0.65 / 0.5The whole panel slides off the top.
Take the overlay out of the flow1.15 / —Sets Display back to None so it can never block a click.
To make it longer, move the last two steps later and stretch the durations to match — keep the final Display: None step at or after the end of the wipe. Anything past about two seconds starts to feel like a wait, which is why it is set where it is.
Removing it altogether
- Interactions panel → delete Play the intro overlay and wipe it up on load.
- Home page → Navigator → delete the Preloader block.
- Publish.
Nothing else depends on it. The hero still plays its own entrance, because that is a separate interaction.
Custom code
How to Edit GSAP Animations
One small GSAP script runs a single effect: the photos that follow your cursor across the hero. Everything else on the site — the hero’s own entrance included — is a normal Webflow interaction with no code. Here is what the script does and how to take it out.
Changing the trail photos
No code needed — these are ordinary Webflow images.
- Open the Home page and find Hero pointer trail — image pool at the top of the hero in the Navigator.
- Inside it are ten blocks, each holding one image. Select an image and swap it in the Settings panel, the same way you would anywhere else.
- Each frame is a 4:5 portrait and the picture is cropped to fill it, so pick photos whose subject sits near the middle. Any source shape works.
- Leave the alt text empty. These are decoration, and a screen reader should skip them.
- Seven of the ten are black and white and three are in colour. That mix is what gives the trail its rhythm — keep roughly that ratio, or make them all one or the other for a quieter hero.
- You can add or remove frames. Ten is also the most photos that can be on screen at once, so that is a good number to stay near.
Use images that are already small — around 460px wide and well under 150 KB each. They load on every visit.
Customizing Key Variables
The feel of the trail is set by seven numbers in a SETTINGS block at the top of the script, on the Home page under Page settings → Custom code. Change one, save, publish. Times are in seconds.
NameDefaultWhat changes
DISTANCE90How far the cursor travels before the next photo drops. Bigger = fewer photos, further apart.
IN_DURATION0.2How long a photo takes to appear.
MOVE_DURATION0.45How long it takes to slide to the cursor. Lower = snappier.
OUT_DURATION0.2How long it takes to fade away.
END_SCALE0.6How small a photo shrinks as it fades. 1 = no shrink.
AMBIENT_INTERVAL0.95Gap between photos while the cursor is still. Bigger = calmer.
AMBIENT_VISIBLE0.85How long an idle photo stays before it fades.
A calmer hero: raise DISTANCE to about 140 and AMBIENT_INTERVAL to about 1.4. A busier one: drop DISTANCE to about 60.
Element Map
Everything the script touches is inside the hero. Nothing else on the site is animated by code.
ClassWhat it does
.section_heroThe area the cursor is watched in.
.hero_trailThe box the photos sit in. Hidden below 992px, so the trail is desktop-only.
.hero_trail-itemThe ten photo frames, reused in turn.
.hero_trail-imgThe picture inside each frame — the part that fades and shrinks.
Removing GSAP Animations
- Home page → Page settings → Custom code. Empty both boxes and save.
- In the Designer, delete the Hero pointer trail — image pool block from the hero, so those ten photos stop loading.
- Publish.
The cursor trail is gone and nothing else changes. The hero word still rises on load, the manifesto and about sentences still light up word by word, the menu still opens and every reveal still plays — all of that is built with Webflow interactions.