fuxt - update our toolset #157
Open
lux-v wants to merge 10 commits into
Open
Conversation
this util is used by our components
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Directives
v-intersection-observerv-in-viewComponents
cursor-followCustom cursor that follows the mouse and shows contextual content (text or image) when hovering elements with
data-cursor-textordata-cursor-imageattributes. GSAP-powered smooth movement viaquickTo. Preloads images, uses MutationObserver to detect new triggers added to the DOM.split-textWrapper around GSAP SplitText. Splits text into
chars,words, orlinesand wraps each in its own element with a custom class. Adds CSS custom properties (--word,--line,--char) for CSS-driven stagger animations.autoSplit: truere-splits on resize. No built-in animation — pair withv-intersection-observerand CSS transitions.Composables
useCursorFollowReactive state store for the cursor-follow component. Exposes
show(text, image)andhide()methods used by the cursor trigger system.useDragScrollMomentumDrag-to-scroll with momentum physics for horizontal containers. Handles both mouse and touch, calculates velocity on release, applies friction easing until the element settles. We use this one with out components.
useSplitTextCore logic behind the
split-textcomponent. Creates and manages a GSAP SplitText instance on a template ref. HandlesautoSplitre-splits and cleanup on unmount.Utils
initSwipeEventsTouch and mouse swipe detection. Dispatches
swipe-left,swipe-right,swipe-up,swipe-downcustom events on an element. We use this one with out components.smoothScrollToElementCustom eased scroll-to-element (easeInOutCubic). Respects
scroll-margin-top, clamps to page bounds, respectsprefers-reduced-motion, and scales duration by distance (520–1400ms).Store updates
isScrollLocked—useSiteStoreNew boolean flag in the site store. When
true,overflow: hiddenis applied to<body>viaapp.vue— used for locking scroll when a menu or modal is open.Type updates
wp-image.d.ts— addedfocalPointfieldwp-menu.d.ts— minor update to menu item typewp-image
focalPointfrom the API response to setobject-positionon the<img>tag