Dropdowns & Information

A locked accordion where each pill expands with a GSAP width+height animation to reveal rich content, while the opposite panel shows a synced visual for the active item. Supports a cover placeholder visual, a close button, keyboard (Escape) dismiss, edit mode for Webflow authoring, reduced-motion fallback, and debounced resize recalculation.

A fully CSS-driven tooltip with smooth opacity and scale/translate transitions. A single SVG icon supports three icon styles (info, question, alert) via data attribute path toggling. Horizontal and vertical position are controlled by data attributes, making it easy to swap alignment without touching CSS.

A fixed-position modal that auto-generates a QR code from a WhatsApp URL using the kjua library. On desktop the trigger button opens the modal overlay; on touch devices the same button acts as a direct link to WhatsApp, bypassing the modal entirely. Supports Escape key dismiss and multiple toggle buttons.

A pure-CSS scroll pattern where each section has a sticky header bar that stacks under the site navigation as you scroll. New section tabs accumulate at the top while the previous section's content scrolls out of view beneath, creating a layered stacking effect without any JavaScript.

A GSAP-animated tab system with an optional autoplay mode. Each tab click or autoplay tick runs a coordinated timeline: the outgoing tab's details collapse and its progress bar resets, the incoming visual cross-fades in, and a progress bar scales from 0 to 1 over the autoplay duration before advancing to the next tab. Multiple independent instances per page are supported.

A zero-dependency modal system controlled entirely by data attributes. Opening a modal sets data-modal-group-status="active" on a shared wrapper and data-modal-status="active" on the target card; closing reverts both. Supports multiple named modals per group, close-on-backdrop-click, close-on-Escape, and any number of [data-modal-target] triggers.

A pure-CSS grid-template-rows accordion with no dependencies. Toggling an item animates the content panel open or closed using a CSS grid row transition. An optional data attribute controls whether sibling items collapse automatically when a new one opens.