Greeting loader

1. Copy to Webflow

   Add Geist and Geist Mono to your site's fonts (Site settings, Fonts, Google Fonts) before pasting: Webflow removes any font your site has not installed.
   Copy to Webflow

2. Add custom CSS

   To keep things simple, the code ships inside the Webflow embed. You can also copy it here and add it yourself to the page or site custom code. How to choose

   The overlay covers the page from the first paint only if it comes first: keep it at the top of the Body, and if you move this code out of the Embed, put the CSS in the head of the page or of the site.

3. Add custom JS

   To keep things simple, the code ships inside the Webflow embed. You can also copy it here and add it yourself to the page or site custom code. How to choose

4. Tune it

   Custom attributes
   Select the section on the canvas and open the Settings panel. Under Custom attributes, add a pair: the name on the left, the value on the right.

   Custom attribute	What it does
   data-greeting-loader	Marks the overlay, an empty block that covers the page while the greetings run. It takes no value: leave the value field empty. Keep it first in the Body, so it covers the page from the first paint. The script builds the panel, the greetings and the dot inside it.
   data-greeting-loader-target	On the headline of the page, an h1 or any element that holds text: where the last word lands. Its own text closes the run, in its own face, and the word that flies becomes it. Keep it in the first screen. Without it the last greeting leaves with the panel. [ Optional ]
   data-greeting-loader-state	Written by the engine on the overlay: waiting, greeting, handover, then done; fading under reduced motion, skipped on a later page of the session, off once destroyed. Never written by hand. [ Optional ]

   Settings
   Every setting is a custom attribute too, added the same way and on the same section. An attribute always wins over the defaults written in the code.

   Attribute	Default	What it is
   data-greeting-loader-color	#15100c	Colour of the panel that covers the page. Options: any CSS colour.
   data-greeting-loader-ink	#f4ece0	Colour of the greetings on the panel, and of the last word for as long as the panel is behind it. Options: any CSS colour that reads on color.
   data-greeting-loader-dot	#ffab1a	Colour of the dot before each greeting, the accent. Options: any CSS colour.
   data-greeting-loader-words	Hello, Bonjour, Hola, Ciao, Hallo, Olá	The greetings, in play order, commas between them (bars, Hello | Hi, you, when a greeting holds a comma). The headline's own text is added at the end unless the list already ends on it. Options: any list of short words; fewer for a short loader, more for a long one.
   data-greeting-loader-size	clamp(40px, 6.2vw, 104px)	Size of the greetings on the panel, any CSS unit. The last word is shown at this size before it grows to the headline's.
   data-greeting-loader-interval	0.62	Time from the first greeting starting to rise to the second one doing so, in seconds. Every next beat is accel times the one before, never under 0.2 s.
   data-greeting-loader-accel	0.78	Share of the previous beat each next greeting keeps, the ratio of the rhythm.
   data-greeting-loader-enter	expo.out	Curve a greeting rises in on, a GSAP ease name; the last word rises on it too. Options: expo.out (fast out of the window, long soft landing), power4.out, power3.out (rounder), back.out(1.4) (a slight overshoot).
   data-greeting-loader-leave	power3.in	Curve a greeting leaves on, a GSAP ease name. Options: power3.in (holds, then goes), expo.in (holds longer, leaves sharper), power2.in (softer).
   data-greeting-loader-stagger	0.022	Delay between two letters of a greeting as it rises, in seconds; the exit uses half of it, and both shrink as the rhythm speeds up.
   data-greeting-loader-tilt	7	Lean of a letter under the window, in degrees, turned from its lower left corner and settled at 0 as it lands.
   data-greeting-loader-hold	0.4	Pause on the last word once it has settled, before it flies, in seconds.
   data-greeting-loader-lift	1.2	How long the panel takes to lift and the last word to reach the headline, in seconds; both share one expo in-out.
   data-greeting-loader-lip	clamp(36px, 7vw, 120px)	Depth of the curve of the panel's lower edge at its fullest, any CSS unit.
   data-greeting-loader-max	6	Longest time, counted from the start, the last word waits for the page to be loaded before the panel lifts anyway, in seconds.
   data-greeting-loader-once	true	Whether the loader plays once per browser session and is skipped on the next pages. Options: true (the first page of the session only), false (every load).

Two files, no build step. It also needs GSAP 3 on the page, loaded with the tag in step 1. It runs in the browser only. Load it with a script tag in plain HTML, in a client-side script in Astro, never in the frontmatter. In React, call GreetingLoader.mount(ref.current) in useEffect and destroy() in its cleanup.

1. Tune it, either way

   Per element with an attribute, or once for the whole site by editing DEFAULTS at the top of the file.

   Attribute	Default	What it is	Lower	Higher
   data-greeting-loader-color	#15100c	Colour of the panel that covers the page. Options: any CSS colour.
   data-greeting-loader-ink	#f4ece0	Colour of the greetings on the panel, and of the last word for as long as the panel is behind it. Options: any CSS colour that reads on color.
   data-greeting-loader-dot	#ffab1a	Colour of the dot before each greeting, the accent. Options: any CSS colour.
   data-greeting-loader-words	Hello, Bonjour, Hola, Ciao, Hallo, Olá	The greetings, in play order, commas between them (bars, Hello | Hi, you, when a greeting holds a comma). The headline's own text is added at the end unless the list already ends on it. Options: any list of short words; fewer for a short loader, more for a long one.
   data-greeting-loader-size	clamp(40px, 6.2vw, 104px)	Size of the greetings on the panel, any CSS unit. The last word is shown at this size before it grows to the headline's.	Small words in a large panel, a quiet opening	Large words, and a shorter growth to the headline
   data-greeting-loader-interval	0.62	Time from the first greeting starting to rise to the second one doing so, in seconds. Every next beat is accel times the one before, never under 0.2 s.	A fast run from the first word	A slow, deliberate start
   data-greeting-loader-accel	0.78	Share of the previous beat each next greeting keeps, the ratio of the rhythm.	Under 0.6 the run reaches its fastest beat after three words	At 1 every greeting keeps the beat of the first, no acceleration
   data-greeting-loader-enter	expo.out	Curve a greeting rises in on, a GSAP ease name; the last word rises on it too. Options: expo.out (fast out of the window, long soft landing), power4.out, power3.out (rounder), back.out(1.4) (a slight overshoot).
   data-greeting-loader-leave	power3.in	Curve a greeting leaves on, a GSAP ease name. Options: power3.in (holds, then goes), expo.in (holds longer, leaves sharper), power2.in (softer).
   data-greeting-loader-stagger	0.022	Delay between two letters of a greeting as it rises, in seconds; the exit uses half of it, and both shrink as the rhythm speeds up.	At 0 the word moves in one block	Past 0.04 the word unrolls like a wave and the long greetings arrive late
   data-greeting-loader-tilt	7	Lean of a letter under the window, in degrees, turned from its lower left corner and settled at 0 as it lands.	At 0 the letters rise straight	Past 12 the lean reads as a tumble
   data-greeting-loader-hold	0.4	Pause on the last word once it has settled, before it flies, in seconds.	The word leaves almost as it lands	A beat on the headline word
   data-greeting-loader-lift	1.2	How long the panel takes to lift and the last word to reach the headline, in seconds; both share one expo in-out.	A snap	A slow, heavy lift, the word drifting to its place
   data-greeting-loader-lip	clamp(36px, 7vw, 120px)	Depth of the curve of the panel's lower edge at its fullest, any CSS unit.	At 0 a flat edge, a plain wipe	A deep bowl, the corners of the page showing well before its middle
   data-greeting-loader-max	6	Longest time, counted from the start, the last word waits for the page to be loaded before the panel lifts anyway, in seconds.	A slow page is uncovered half loaded	The visitor may be held on the last word for a long time
   data-greeting-loader-once	true	Whether the loader plays once per browser session and is skipped on the next pages. Options: true (the first page of the session only), false (every load).

2. Drive it from JavaScript

   When the page plays something of its own as the panel lifts, or when the loader has to be played again without a reload.
   JavaScript Copy

   const element = document.querySelector('[data-greeting-loader]');
   element.addEventListener('greeting-loader:handover', (e) => {
     console.log(e.detail);
   });
   
   const loader = GreetingLoader.mount(element);   // the instance, playing as soon as GSAP is there, or skipped
   element.addEventListener('greeting-loader:done', () => {
     // the headline is in place, the page is free
   });
   loader.replay();                                 // plays it again, whatever the session says
   
   // When the loader has to go for good:
   loader.destroy();   // gives the scroll and the headline back, leaves the overlay empty and hidden

3. Fit it to your page

   • Put the overlay first in the body, or first in the section that is the page: it is fixed and covers the viewport from the first paint, before any script runs, so the page never flashes under it. The stylesheet must be on the page from the head for the same reason. The overlay stays empty.
   • Mark the headline with data-greeting-loader-target: an h1, or any element that holds text, a span inside a heading included. Its text is the last word of the run, so the list of greetings does not have to end on it. The greetings take the face, the weight and the letter spacing of that headline, so the last swap does not change typeface; their size is size.
   • The headline should be in the first screen. The word flies to wherever the headline is; a headline further down the page sends it out of the window.
   • One setting for every page, without opening the file: declare window.GreetingLoaderSettings = { hold: 1 } in a script placed before greeting-loader.js. The three levels, least specific first, are DEFAULTS, then that object, then a data-greeting-loader-* attribute on the overlay.
   • GSAP 3 has to be on the page. The engine waits for gsap instead of assuming it, up to max seconds; past that it hides the overlay and warns in the console, since a loader must never be the reason a page cannot be read. The order of the two script tags does not matter.
   • Once per session. The first page of a visit plays the loader and writes greeting-loader:played in sessionStorage; on the next pages the engine builds nothing and hides the overlay as soon as it runs. While you work on a page, set data-greeting-loader-once="false" so every reload plays.
   • The last word waits for the page. Once its pause is over, the panel lifts when the load event has fired, or max seconds after the start, whichever comes first.
   • What the script writes: data-greeting-loader-state on the overlay, waiting until the faces are in, greeting during the run, handover while the panel lifts, then done; fading under reduced motion, skipped on a later page of the session, off once destroyed. Three custom properties on the overlay, --greeting-loader-color, --greeting-loader-ink and --greeting-loader-dot. data-greeting-loader-lock on html while the scroll is held, and data-greeting-loader-away on the headline while its copy travels; both are taken off at the end, and everything built inside the overlay with them. The custom properties stay until destroy().
   • Events, all bubbling from the overlay, with { loader } as event.detail: greeting-loader:start at the start of a play, greeting-loader:word at each greeting (with index, word and last), greeting-loader:handover when the panel starts to lift and the word to fly, the cue for anything else the page plays, and greeting-loader:done once the overlay is out (with skipped: true when it never played).
   • From JavaScript: GreetingLoader.mount(element, overrides) mounts and plays at once. The api carries play() (a new play if the loader is idle, respecting once), replay() (a new play whatever the session says), skip() (straight to done), state(), timeline() (the GSAP timeline of the play under way, null outside one), isRunning(), settings and destroy(). GreetingLoader.replay() plays every mounted overlay again, which is how the library's cards replay the preview.
   • **destroy()** kills the timeline, gives the scroll and the headline back, removes what the script built, its listeners and its custom properties. The overlay is left empty and hidden (data-greeting-loader-state="off"): put back as it was written, it would cover the page.
   • Touch: nothing to touch, the loader plays the same on every device.
   • **prefers-reduced-motion**: no greetings and no flight. The headline is already in place under the panel, and the panel fades out in 0.3 s.
   • Without any script, the stylesheet lets the overlay go after eight seconds: a loader must never be the reason a page cannot be read.
   • The words of the markup are the preview's, and they ship as they are. Put the user's own words in their place whenever they want.
   • On Webflow, add the fonts first. Add Geist and Geist Mono to your site's fonts (Site settings, Fonts, Google Fonts) before pasting: the paste names them, and the Designer drops a font the site does not have.

4. Avoid the pitfalls

   • The panel shows for an instant on the later pages of a session when the script loads late: the overlay is painted by the stylesheet, and only the script knows the session has seen it. To rule it out, put this line in the head, before the stylesheet paints anything: <script>try{if(sessionStorage.getItem('greeting-loader:played'))document.documentElement.setAttribute('data-greeting-loader-seen','')}catch(e){}</script>. The stylesheet hides the overlay under that attribute.
   • The first paint takes the default colour. color reaches the overlay when the script runs. For a panel that is not ink from the very first frame, also write --greeting-loader-color on the overlay in your own stylesheet.
   • Do not hide the headline yourself. The engine hides it while its copy travels and shows it again on landing; a headline hidden by the page stays hidden on a session where the loader is skipped.
   • An entrance animation on the headline fights the hand-over. The copy lands on the headline as it is measured at that moment: a headline that is still moving, split into animated letters or faded in by another script will not be under it. Start such an animation on greeting-loader:done.
   • A transform on an ancestor of the headline is fine as long as it is at rest; the copy is laid out flat, so a rotated or scaled headline is not matched.
   • The copy takes the typography, not the decoration: font, size, weight, spacing, line height, alignment, case and colour. A gradient text, a background, a text shadow or a stroke on the headline do not travel, and appear on landing.
   • **Settings handed to mount() after the page loaded are dropped.** The script mounts as soon as it runs, and mount() on an overlay that already carries the loader returns the existing one. A page-wide block goes in window.GreetingLoaderSettings, declared before the engine.
   • In React, Vue or any framework that owns the DOM, render the overlay in the first HTML the server sends and mount it once in a top-level effect; the engine never removes the overlay, it hides it by its state attribute. Call destroy() in the cleanup.

One click on Copy the AI prompt copies everything an assistant needs to build this effect: the complete code, the markup, the dependency, every setting and every pitfall.