Instructions
Element Map
Know what drives the experience before you change it.
Page structure
Navigation and Footer are shared components. Works, Services, Articles, and their detail pages are CMS-driven. Keep collection bindings intact when editing layouts.
Custom-code selectors
| Selector | Purpose | Care level |
|---|---|---|
[data-words] | Attribute selector read by the site-wide Scramble Text script. Its comma-separated value defines the words to rotate through. | Apply the attribute to the element to animate. If a wrapper must retain other content, add .scramble-text to the child that should change. |
[data-words] defines the rotating words; .scramble-text optionally targets the text inside its wrapper. The navigation-delay script targets .text-navigation-link a and a.text-navigation-link.
Site-wide code
Three site-wide details shape the feel: Lenis scrolling, rotating Scramble Text, and a 0.8-second delay on eligible navigation links.
Customizing Key Variables
Tune the system at its source—not one element at a time.
Edit variables
SAKAI’s typography, spacing, and color are built around shared Variables. Edit the linked token to keep the system consistent across pages.
- Select the element or class in Designer.
- Click the variable-linked value in the Style panel to identify the variable.
- Edit it in Variables for a global change, or create a page-specific class for a local change.
- Review desktop, tablet, and mobile after changing typography or spacing.
Make deliberate changes. One shared token can reshape the whole site.
Code timing
Scramble Text timing lives in Footer code: 2.5-second interval, 0.3-second fade-out, 0.4-second reveal, and 0.03-second stagger. Lenis uses its default settings.
Removing GSAP Animations
Keep the movement that serves the experience. Remove only what you understand.
Current effects
Lenis removed → native browser scrolling. Scramble Text removed → rotating words become static. Navigation delay removed → eligible links open immediately. Webflow Interactions may run separate animations.
Remove one effect
Open Site Settings → Custom Code → Footer Code and remove only the script block for the effect you’re changing. Never clear the entire field. Keep shared libraries used by other scripts; removing them can break unrelated effects or trigger errors. Save, publish, then test scrolling, rotating text, navigation, and mobile layouts.
