use-scroll-animate 9.0.0 → 9.2.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +24 -0
- package/dist/components/fx-cinema.cjs +100 -0
- package/dist/components/fx-cinema.cjs.map +1 -0
- package/dist/components/fx-cinema.d.cts +70 -0
- package/dist/components/fx-cinema.d.ts +70 -0
- package/dist/components/fx-cinema.js +95 -0
- package/dist/components/fx-cinema.js.map +1 -0
- package/dist/components/fx-lottie.cjs +216 -0
- package/dist/components/fx-lottie.cjs.map +1 -0
- package/dist/components/fx-lottie.d.cts +88 -0
- package/dist/components/fx-lottie.d.ts +88 -0
- package/dist/components/fx-lottie.js +210 -0
- package/dist/components/fx-lottie.js.map +1 -0
- package/dist/components/fx2.cjs +15 -0
- package/dist/components/fx2.cjs.map +1 -1
- package/dist/components/fx2.d.cts +68 -1
- package/dist/components/fx2.d.ts +68 -1
- package/dist/components/fx2.js +9 -1
- package/dist/components/fx2.js.map +1 -1
- package/dist/components/marketplace.cjs +2 -0
- package/dist/components/marketplace.cjs.map +1 -1
- package/dist/components/marketplace.js +2 -0
- package/dist/components/marketplace.js.map +1 -1
- package/dist/components/widgets.cjs +545 -207
- package/dist/components/widgets.cjs.map +1 -1
- package/dist/components/widgets.d.cts +106 -2
- package/dist/components/widgets.d.ts +106 -2
- package/dist/components/widgets.js +542 -209
- package/dist/components/widgets.js.map +1 -1
- package/dist/widgets.umd.js +1 -1
- package/dist/widgets.umd.js.map +1 -1
- package/docs/ROADMAP.md +2 -2
- package/docs/components.md +38 -0
- package/package.json +41 -1
|
@@ -1668,6 +1668,106 @@ interface UsaPluginStoreElement extends UsaElement {
|
|
|
1668
1668
|
}
|
|
1669
1669
|
declare function definePluginStore(tag?: string): CustomElementConstructor | undefined;
|
|
1670
1670
|
|
|
1671
|
+
/**
|
|
1672
|
+
* `<usa-chapter-nav for="#story">` (9.1) — chapter navigation for long-form
|
|
1673
|
+
* stories: one entry per `[data-chapter]` section (title from
|
|
1674
|
+
* `data-chapter`, else its first heading) inside the `for` container (or
|
|
1675
|
+
* the document), each with a progress bar that fills as you read that
|
|
1676
|
+
* chapter; the current chapter gets `aria-current="step"`, clicking one
|
|
1677
|
+
* scrolls smoothly to it. `orientation` horizontal (default) | vertical.
|
|
1678
|
+
* `current` index, `goTo(i)`; `usa:chapter` { index, title } on change.
|
|
1679
|
+
* A labelled `navigation`; reduced motion: instant jumps.
|
|
1680
|
+
*/
|
|
1681
|
+
interface UsaChapterNavElement extends UsaElement {
|
|
1682
|
+
readonly current: number;
|
|
1683
|
+
goTo(i: number): void;
|
|
1684
|
+
}
|
|
1685
|
+
declare function defineChapterNav(tag?: string): CustomElementConstructor | undefined;
|
|
1686
|
+
|
|
1687
|
+
/**
|
|
1688
|
+
* `<usa-scene camera="dolly-in" strength="1">` (9.1) — a scroll-scrubbed
|
|
1689
|
+
* cinematic shot: while the scene crosses the viewport its media (first
|
|
1690
|
+
* `img` / `video` / `[data-shot]` child) follows a camera move —
|
|
1691
|
+
* `dolly-in` · `dolly-out` · `pan-left` · `pan-right` · `tilt-up` ·
|
|
1692
|
+
* `tilt-down` · `zoom-in` · `zoom-out` · `orbit` — and `[data-caption]`
|
|
1693
|
+
* children fade in at their `data-at` progress (0–1). `autoplay` plays the
|
|
1694
|
+
* move on its own (looping back and forth) instead of following the scroll.
|
|
1695
|
+
* `progress` (0–1);
|
|
1696
|
+
* `usa:shot` { progress } while it moves. Reduced motion: a still frame,
|
|
1697
|
+
* captions shown.
|
|
1698
|
+
*/
|
|
1699
|
+
interface UsaSceneElement extends UsaElement {
|
|
1700
|
+
readonly progress: number;
|
|
1701
|
+
setProgress(p: number): void;
|
|
1702
|
+
}
|
|
1703
|
+
declare function defineScene(tag?: string): CustomElementConstructor | undefined;
|
|
1704
|
+
|
|
1705
|
+
/**
|
|
1706
|
+
* 9.2 — Lottie import (`motionary/fx/lottie`, also `motionary/components/fx-lottie`).
|
|
1707
|
+
*
|
|
1708
|
+
* `lottieToKeyframes(json)` converts the layer transforms of a Lottie
|
|
1709
|
+
* (bodymovin) JSON — position `p`, scale `s`, rotation `r`, opacity `o`
|
|
1710
|
+
* (static or keyframed) — into WAAPI keyframes per layer plus the duration
|
|
1711
|
+
* (`op − ip` frames at `fr` fps), so a designer's After Effects motion runs
|
|
1712
|
+
* on Motionary's clock without lottie-web. `lottieToSvg(json)` renders the
|
|
1713
|
+
* simple vector shapes (ellipse `el`, rect `rc`, path `sh`, fill `fl`,
|
|
1714
|
+
* stroke `st`) as SVG groups, one per layer. `riveInputs(instance, el, map)`
|
|
1715
|
+
* wires Motionary-style triggers (hover / press / click / enter) to the
|
|
1716
|
+
* boolean / trigger inputs of a Rive state machine you created with the
|
|
1717
|
+
* Rive runtime.
|
|
1718
|
+
*
|
|
1719
|
+
* Effects: `lottie-play` (attention) plays the keyframes stored on an
|
|
1720
|
+
* element by `<usa-lottie>`; `icon-pop` (click) a sticker-like pop with a
|
|
1721
|
+
* ring burst for icons. Reduced motion: no motion.
|
|
1722
|
+
*/
|
|
1723
|
+
|
|
1724
|
+
interface LottieLayerMotion {
|
|
1725
|
+
name: string;
|
|
1726
|
+
index: number;
|
|
1727
|
+
keyframes: Keyframe[];
|
|
1728
|
+
anchor: [number, number];
|
|
1729
|
+
}
|
|
1730
|
+
interface LottieMotion {
|
|
1731
|
+
width: number;
|
|
1732
|
+
height: number;
|
|
1733
|
+
duration: number;
|
|
1734
|
+
layers: LottieLayerMotion[];
|
|
1735
|
+
}
|
|
1736
|
+
|
|
1737
|
+
/**
|
|
1738
|
+
* `<usa-lottie src="anim.json">` (9.2) — plays a Lottie (bodymovin) file
|
|
1739
|
+
* without lottie-web: simple vector layers are rendered as SVG and their
|
|
1740
|
+
* transform / opacity keyframes run as WAAPI animations on Motionary's
|
|
1741
|
+
* clock. `autoplay` (on screen), `loop`, `speed`, `label`; `json`
|
|
1742
|
+
* property (set data directly), `play()`, `pause()`, `stop()`, `parsed`;
|
|
1743
|
+
* `usa:load` { duration, layers } / `usa:complete`. An `img` with `label`;
|
|
1744
|
+
* reduced motion: first frame, no autoplay.
|
|
1745
|
+
*/
|
|
1746
|
+
interface UsaLottieElement extends UsaElement {
|
|
1747
|
+
json: unknown;
|
|
1748
|
+
readonly parsed: LottieMotion | null;
|
|
1749
|
+
play(): void;
|
|
1750
|
+
pause(): void;
|
|
1751
|
+
stop(): void;
|
|
1752
|
+
}
|
|
1753
|
+
declare function defineLottie(tag?: string): CustomElementConstructor | undefined;
|
|
1754
|
+
|
|
1755
|
+
/**
|
|
1756
|
+
* `<usa-lottie-icon name="heart" trigger="click">` (9.2) — an animated icon
|
|
1757
|
+
* set shipped as tiny Lottie files and played by `<usa-lottie>`: `heart`
|
|
1758
|
+
* (beat), `bell` (swing), `check` (draw-in), `spinner` (spin), `star`
|
|
1759
|
+
* (twinkle), `bolt` (zap). `trigger` click (default) · hover · enter ·
|
|
1760
|
+
* loop; `size` (px, 32), `color`, `label` (otherwise decorative). The JSON
|
|
1761
|
+
* of each is exported as `LOTTIE_ICONS` — the same format designers export
|
|
1762
|
+
* from After Effects. Reduced motion: static icon.
|
|
1763
|
+
*/
|
|
1764
|
+
interface UsaLottieIconElement extends UsaElement {
|
|
1765
|
+
play(): void;
|
|
1766
|
+
}
|
|
1767
|
+
/** The built-in Lottie icon set (9.2). */
|
|
1768
|
+
declare const LOTTIE_ICONS: Record<string, unknown>;
|
|
1769
|
+
declare function defineLottieIcon(tag?: string): CustomElementConstructor | undefined;
|
|
1770
|
+
|
|
1671
1771
|
/**
|
|
1672
1772
|
* motionary/components/widgets — the 6.x animated UI widgets, in their own
|
|
1673
1773
|
* entry so `motionary/components` and `components/lite` keep their size
|
|
@@ -1773,8 +1873,12 @@ declare global {
|
|
|
1773
1873
|
'usa-prop-panel': UsaPropPanelElement;
|
|
1774
1874
|
'usa-motion': UsaMotionElement;
|
|
1775
1875
|
'usa-plugin-store': UsaPluginStoreElement;
|
|
1876
|
+
'usa-chapter-nav': UsaChapterNavElement;
|
|
1877
|
+
'usa-scene': UsaSceneElement;
|
|
1878
|
+
'usa-lottie': UsaLottieElement;
|
|
1879
|
+
'usa-lottie-icon': UsaLottieIconElement;
|
|
1776
1880
|
}
|
|
1777
1881
|
}
|
|
1778
1882
|
|
|
1779
|
-
export { CAROUSEL_EFFECTS, EQ_PRESETS, FESTIVAL_THEMES, MENU_EFFECTS, MODAL_EFFECTS, NAV_INDICATORS, PRESENCE_STATES, PROGRESS_VARIANTS, RETRO_VARIANTS, SEGMENTED_VARIANTS, SHEET_SIDES, SKELETON_VARIANTS, SPARK_VARIANTS, SWITCH_VARIANTS, TAB_INDICATORS, TIP_PLACEMENTS, TOAST_POSITIONS, TOGGLE_VARIANTS, WEATHER_CONDITIONS, WIDGETS, WIDGET_TAGS, badgeProgress, cartTotal, defineAddToCart, defineBadgeWall, defineBarChart, defineCarousel, defineCartDrawer, defineChatComposer, defineClockControl, defineCodeExport, defineColorPicker, defineCommandPalette, defineCompare, defineCountdown, defineCubeGallery, defineDatePicker, defineDisclosure, defineDock, defineEqualizer, defineFestivalBanner, defineField, defineFileDrop, defineGauge, defineGestureSticker, defineGlobe, defineGyroCard, defineHudPanel, defineHydrate, defineKanban, defineKeyframeEditor, defineKpi, defineLeaderboard, defineLiquidNav, defineLocationCard, defineLyrics, defineMasonryFlow, defineMenu, defineMenuToggle, defineMessageList, defineMilestones, defineModal, defineMotion, defineMusicPlayer, defineNavMorph, defineNotificationBell, defineOdometer, defineOrganicCard, defineOtp, definePagination, definePanorama, definePluginStore, definePresence, definePrizeWheel, defineProductGallery, defineProgressRing, definePropPanel, definePullCord, defineRadar, defineReactions, defineRedEnvelope, defineRetroButton, defineSegmented, defineSheet, defineShortcut, defineSkeletonReveal, defineSketchChart, defineSparkline, defineSpatialCard, defineStarRating, defineStepper, defineStickyWall, defineStories, defineSuggestionChips, defineSwipeDeck, defineSwitch, defineTabBar, defineTerminal, defineThemeSurface, defineThemeSwitcher, defineTip, defineToastStack, defineUploadProgress, defineVoiceButton, defineVolumeKnob, defineWeatherCard, defineWidgets, defineXpBar, describeComponent, exportComponent, formatBytes, formatDistance, fuzzyMatch, haversine, hexToHsv, hsvToHex, initials, keyLabels, levelFor, matchesKeys, monthGrid, pageWindow, parseChips, parseISODate, parseLRC, parseMarkers, parseProps, parseReactions, parseTargets, passwordStrength, project, rankRows, sanitizeCode, sparkPoints, splitTime, stackToast, waveBars, wheelAngle, wrapIndex };
|
|
1780
|
-
export type { BellNotice, CartItem, ChatMessage, ExportFormat, ExportedNode, GlobeMarker, LeaderRow, PaletteCommand, PresenceState, PropSpec, RadarTarget, StackToastOptions, StickerState, UsaAddToCartElement, UsaBadgeWallElement, UsaBarChartElement, UsaCarouselElement, UsaCartDrawerElement, UsaChatComposerElement, UsaClockControlElement, UsaCodeExportElement, UsaColorPickerElement, UsaCommandPaletteElement, UsaCompareElement, UsaCountdownElement, UsaCubeGalleryElement, UsaDatePickerElement, UsaDisclosureElement, UsaDockElement, UsaEqualizerElement, UsaFestivalBannerElement, UsaFieldElement, UsaFileDropElement, UsaGaugeElement, UsaGestureStickerElement, UsaGlobeElement, UsaGyroCardElement, UsaHudPanelElement, UsaHydrateElement, UsaKanbanElement, UsaKeyframeEditorElement, UsaKpiElement, UsaLeaderboardElement, UsaLiquidNavElement, UsaLocationCardElement, UsaLyricsElement, UsaMasonryFlowElement, UsaMenuElement, UsaMenuToggleElement, UsaMessageListElement, UsaMilestonesElement, UsaModalElement, UsaMotionElement, UsaMusicPlayerElement, UsaNavMorphElement, UsaNotificationBellElement, UsaOdometerElement, UsaOrganicCardElement, UsaOtpElement, UsaPaginationElement, UsaPanoramaElement, UsaPluginStoreElement, UsaPresenceElement, UsaPrizeWheelElement, UsaProductGalleryElement, UsaProgressRingElement, UsaPropPanelElement, UsaPullCordElement, UsaRadarElement, UsaReactionsElement, UsaRedEnvelopeElement, UsaRetroButtonElement, UsaSegmentedElement, UsaSheetElement, UsaShortcutElement, UsaSkeletonRevealElement, UsaSketchChartElement, UsaSparklineElement, UsaSpatialCardElement, UsaStarRatingElement, UsaStepperElement, UsaStickyWallElement, UsaStoriesElement, UsaSuggestionChipsElement, UsaSwipeDeckElement, UsaSwitchElement, UsaTabBarElement, UsaTerminalElement, UsaThemeSurfaceElement, UsaThemeSwitcherElement, UsaTipElement, UsaToastStackElement, UsaUploadProgressElement, UsaVoiceButtonElement, UsaVolumeKnobElement, UsaWeatherCardElement, UsaXpBarElement, WallBadge };
|
|
1883
|
+
export { CAROUSEL_EFFECTS, EQ_PRESETS, FESTIVAL_THEMES, LOTTIE_ICONS, MENU_EFFECTS, MODAL_EFFECTS, NAV_INDICATORS, PRESENCE_STATES, PROGRESS_VARIANTS, RETRO_VARIANTS, SEGMENTED_VARIANTS, SHEET_SIDES, SKELETON_VARIANTS, SPARK_VARIANTS, SWITCH_VARIANTS, TAB_INDICATORS, TIP_PLACEMENTS, TOAST_POSITIONS, TOGGLE_VARIANTS, WEATHER_CONDITIONS, WIDGETS, WIDGET_TAGS, badgeProgress, cartTotal, defineAddToCart, defineBadgeWall, defineBarChart, defineCarousel, defineCartDrawer, defineChapterNav, defineChatComposer, defineClockControl, defineCodeExport, defineColorPicker, defineCommandPalette, defineCompare, defineCountdown, defineCubeGallery, defineDatePicker, defineDisclosure, defineDock, defineEqualizer, defineFestivalBanner, defineField, defineFileDrop, defineGauge, defineGestureSticker, defineGlobe, defineGyroCard, defineHudPanel, defineHydrate, defineKanban, defineKeyframeEditor, defineKpi, defineLeaderboard, defineLiquidNav, defineLocationCard, defineLottie, defineLottieIcon, defineLyrics, defineMasonryFlow, defineMenu, defineMenuToggle, defineMessageList, defineMilestones, defineModal, defineMotion, defineMusicPlayer, defineNavMorph, defineNotificationBell, defineOdometer, defineOrganicCard, defineOtp, definePagination, definePanorama, definePluginStore, definePresence, definePrizeWheel, defineProductGallery, defineProgressRing, definePropPanel, definePullCord, defineRadar, defineReactions, defineRedEnvelope, defineRetroButton, defineScene, defineSegmented, defineSheet, defineShortcut, defineSkeletonReveal, defineSketchChart, defineSparkline, defineSpatialCard, defineStarRating, defineStepper, defineStickyWall, defineStories, defineSuggestionChips, defineSwipeDeck, defineSwitch, defineTabBar, defineTerminal, defineThemeSurface, defineThemeSwitcher, defineTip, defineToastStack, defineUploadProgress, defineVoiceButton, defineVolumeKnob, defineWeatherCard, defineWidgets, defineXpBar, describeComponent, exportComponent, formatBytes, formatDistance, fuzzyMatch, haversine, hexToHsv, hsvToHex, initials, keyLabels, levelFor, matchesKeys, monthGrid, pageWindow, parseChips, parseISODate, parseLRC, parseMarkers, parseProps, parseReactions, parseTargets, passwordStrength, project, rankRows, sanitizeCode, sparkPoints, splitTime, stackToast, waveBars, wheelAngle, wrapIndex };
|
|
1884
|
+
export type { BellNotice, CartItem, ChatMessage, ExportFormat, ExportedNode, GlobeMarker, LeaderRow, PaletteCommand, PresenceState, PropSpec, RadarTarget, StackToastOptions, StickerState, UsaAddToCartElement, UsaBadgeWallElement, UsaBarChartElement, UsaCarouselElement, UsaCartDrawerElement, UsaChapterNavElement, UsaChatComposerElement, UsaClockControlElement, UsaCodeExportElement, UsaColorPickerElement, UsaCommandPaletteElement, UsaCompareElement, UsaCountdownElement, UsaCubeGalleryElement, UsaDatePickerElement, UsaDisclosureElement, UsaDockElement, UsaEqualizerElement, UsaFestivalBannerElement, UsaFieldElement, UsaFileDropElement, UsaGaugeElement, UsaGestureStickerElement, UsaGlobeElement, UsaGyroCardElement, UsaHudPanelElement, UsaHydrateElement, UsaKanbanElement, UsaKeyframeEditorElement, UsaKpiElement, UsaLeaderboardElement, UsaLiquidNavElement, UsaLocationCardElement, UsaLottieElement, UsaLottieIconElement, UsaLyricsElement, UsaMasonryFlowElement, UsaMenuElement, UsaMenuToggleElement, UsaMessageListElement, UsaMilestonesElement, UsaModalElement, UsaMotionElement, UsaMusicPlayerElement, UsaNavMorphElement, UsaNotificationBellElement, UsaOdometerElement, UsaOrganicCardElement, UsaOtpElement, UsaPaginationElement, UsaPanoramaElement, UsaPluginStoreElement, UsaPresenceElement, UsaPrizeWheelElement, UsaProductGalleryElement, UsaProgressRingElement, UsaPropPanelElement, UsaPullCordElement, UsaRadarElement, UsaReactionsElement, UsaRedEnvelopeElement, UsaRetroButtonElement, UsaSceneElement, UsaSegmentedElement, UsaSheetElement, UsaShortcutElement, UsaSkeletonRevealElement, UsaSketchChartElement, UsaSparklineElement, UsaSpatialCardElement, UsaStarRatingElement, UsaStepperElement, UsaStickyWallElement, UsaStoriesElement, UsaSuggestionChipsElement, UsaSwipeDeckElement, UsaSwitchElement, UsaTabBarElement, UsaTerminalElement, UsaThemeSurfaceElement, UsaThemeSwitcherElement, UsaTipElement, UsaToastStackElement, UsaUploadProgressElement, UsaVoiceButtonElement, UsaVolumeKnobElement, UsaWeatherCardElement, UsaXpBarElement, WallBadge };
|
|
@@ -1668,6 +1668,106 @@ interface UsaPluginStoreElement extends UsaElement {
|
|
|
1668
1668
|
}
|
|
1669
1669
|
declare function definePluginStore(tag?: string): CustomElementConstructor | undefined;
|
|
1670
1670
|
|
|
1671
|
+
/**
|
|
1672
|
+
* `<usa-chapter-nav for="#story">` (9.1) — chapter navigation for long-form
|
|
1673
|
+
* stories: one entry per `[data-chapter]` section (title from
|
|
1674
|
+
* `data-chapter`, else its first heading) inside the `for` container (or
|
|
1675
|
+
* the document), each with a progress bar that fills as you read that
|
|
1676
|
+
* chapter; the current chapter gets `aria-current="step"`, clicking one
|
|
1677
|
+
* scrolls smoothly to it. `orientation` horizontal (default) | vertical.
|
|
1678
|
+
* `current` index, `goTo(i)`; `usa:chapter` { index, title } on change.
|
|
1679
|
+
* A labelled `navigation`; reduced motion: instant jumps.
|
|
1680
|
+
*/
|
|
1681
|
+
interface UsaChapterNavElement extends UsaElement {
|
|
1682
|
+
readonly current: number;
|
|
1683
|
+
goTo(i: number): void;
|
|
1684
|
+
}
|
|
1685
|
+
declare function defineChapterNav(tag?: string): CustomElementConstructor | undefined;
|
|
1686
|
+
|
|
1687
|
+
/**
|
|
1688
|
+
* `<usa-scene camera="dolly-in" strength="1">` (9.1) — a scroll-scrubbed
|
|
1689
|
+
* cinematic shot: while the scene crosses the viewport its media (first
|
|
1690
|
+
* `img` / `video` / `[data-shot]` child) follows a camera move —
|
|
1691
|
+
* `dolly-in` · `dolly-out` · `pan-left` · `pan-right` · `tilt-up` ·
|
|
1692
|
+
* `tilt-down` · `zoom-in` · `zoom-out` · `orbit` — and `[data-caption]`
|
|
1693
|
+
* children fade in at their `data-at` progress (0–1). `autoplay` plays the
|
|
1694
|
+
* move on its own (looping back and forth) instead of following the scroll.
|
|
1695
|
+
* `progress` (0–1);
|
|
1696
|
+
* `usa:shot` { progress } while it moves. Reduced motion: a still frame,
|
|
1697
|
+
* captions shown.
|
|
1698
|
+
*/
|
|
1699
|
+
interface UsaSceneElement extends UsaElement {
|
|
1700
|
+
readonly progress: number;
|
|
1701
|
+
setProgress(p: number): void;
|
|
1702
|
+
}
|
|
1703
|
+
declare function defineScene(tag?: string): CustomElementConstructor | undefined;
|
|
1704
|
+
|
|
1705
|
+
/**
|
|
1706
|
+
* 9.2 — Lottie import (`motionary/fx/lottie`, also `motionary/components/fx-lottie`).
|
|
1707
|
+
*
|
|
1708
|
+
* `lottieToKeyframes(json)` converts the layer transforms of a Lottie
|
|
1709
|
+
* (bodymovin) JSON — position `p`, scale `s`, rotation `r`, opacity `o`
|
|
1710
|
+
* (static or keyframed) — into WAAPI keyframes per layer plus the duration
|
|
1711
|
+
* (`op − ip` frames at `fr` fps), so a designer's After Effects motion runs
|
|
1712
|
+
* on Motionary's clock without lottie-web. `lottieToSvg(json)` renders the
|
|
1713
|
+
* simple vector shapes (ellipse `el`, rect `rc`, path `sh`, fill `fl`,
|
|
1714
|
+
* stroke `st`) as SVG groups, one per layer. `riveInputs(instance, el, map)`
|
|
1715
|
+
* wires Motionary-style triggers (hover / press / click / enter) to the
|
|
1716
|
+
* boolean / trigger inputs of a Rive state machine you created with the
|
|
1717
|
+
* Rive runtime.
|
|
1718
|
+
*
|
|
1719
|
+
* Effects: `lottie-play` (attention) plays the keyframes stored on an
|
|
1720
|
+
* element by `<usa-lottie>`; `icon-pop` (click) a sticker-like pop with a
|
|
1721
|
+
* ring burst for icons. Reduced motion: no motion.
|
|
1722
|
+
*/
|
|
1723
|
+
|
|
1724
|
+
interface LottieLayerMotion {
|
|
1725
|
+
name: string;
|
|
1726
|
+
index: number;
|
|
1727
|
+
keyframes: Keyframe[];
|
|
1728
|
+
anchor: [number, number];
|
|
1729
|
+
}
|
|
1730
|
+
interface LottieMotion {
|
|
1731
|
+
width: number;
|
|
1732
|
+
height: number;
|
|
1733
|
+
duration: number;
|
|
1734
|
+
layers: LottieLayerMotion[];
|
|
1735
|
+
}
|
|
1736
|
+
|
|
1737
|
+
/**
|
|
1738
|
+
* `<usa-lottie src="anim.json">` (9.2) — plays a Lottie (bodymovin) file
|
|
1739
|
+
* without lottie-web: simple vector layers are rendered as SVG and their
|
|
1740
|
+
* transform / opacity keyframes run as WAAPI animations on Motionary's
|
|
1741
|
+
* clock. `autoplay` (on screen), `loop`, `speed`, `label`; `json`
|
|
1742
|
+
* property (set data directly), `play()`, `pause()`, `stop()`, `parsed`;
|
|
1743
|
+
* `usa:load` { duration, layers } / `usa:complete`. An `img` with `label`;
|
|
1744
|
+
* reduced motion: first frame, no autoplay.
|
|
1745
|
+
*/
|
|
1746
|
+
interface UsaLottieElement extends UsaElement {
|
|
1747
|
+
json: unknown;
|
|
1748
|
+
readonly parsed: LottieMotion | null;
|
|
1749
|
+
play(): void;
|
|
1750
|
+
pause(): void;
|
|
1751
|
+
stop(): void;
|
|
1752
|
+
}
|
|
1753
|
+
declare function defineLottie(tag?: string): CustomElementConstructor | undefined;
|
|
1754
|
+
|
|
1755
|
+
/**
|
|
1756
|
+
* `<usa-lottie-icon name="heart" trigger="click">` (9.2) — an animated icon
|
|
1757
|
+
* set shipped as tiny Lottie files and played by `<usa-lottie>`: `heart`
|
|
1758
|
+
* (beat), `bell` (swing), `check` (draw-in), `spinner` (spin), `star`
|
|
1759
|
+
* (twinkle), `bolt` (zap). `trigger` click (default) · hover · enter ·
|
|
1760
|
+
* loop; `size` (px, 32), `color`, `label` (otherwise decorative). The JSON
|
|
1761
|
+
* of each is exported as `LOTTIE_ICONS` — the same format designers export
|
|
1762
|
+
* from After Effects. Reduced motion: static icon.
|
|
1763
|
+
*/
|
|
1764
|
+
interface UsaLottieIconElement extends UsaElement {
|
|
1765
|
+
play(): void;
|
|
1766
|
+
}
|
|
1767
|
+
/** The built-in Lottie icon set (9.2). */
|
|
1768
|
+
declare const LOTTIE_ICONS: Record<string, unknown>;
|
|
1769
|
+
declare function defineLottieIcon(tag?: string): CustomElementConstructor | undefined;
|
|
1770
|
+
|
|
1671
1771
|
/**
|
|
1672
1772
|
* motionary/components/widgets — the 6.x animated UI widgets, in their own
|
|
1673
1773
|
* entry so `motionary/components` and `components/lite` keep their size
|
|
@@ -1773,8 +1873,12 @@ declare global {
|
|
|
1773
1873
|
'usa-prop-panel': UsaPropPanelElement;
|
|
1774
1874
|
'usa-motion': UsaMotionElement;
|
|
1775
1875
|
'usa-plugin-store': UsaPluginStoreElement;
|
|
1876
|
+
'usa-chapter-nav': UsaChapterNavElement;
|
|
1877
|
+
'usa-scene': UsaSceneElement;
|
|
1878
|
+
'usa-lottie': UsaLottieElement;
|
|
1879
|
+
'usa-lottie-icon': UsaLottieIconElement;
|
|
1776
1880
|
}
|
|
1777
1881
|
}
|
|
1778
1882
|
|
|
1779
|
-
export { CAROUSEL_EFFECTS, EQ_PRESETS, FESTIVAL_THEMES, MENU_EFFECTS, MODAL_EFFECTS, NAV_INDICATORS, PRESENCE_STATES, PROGRESS_VARIANTS, RETRO_VARIANTS, SEGMENTED_VARIANTS, SHEET_SIDES, SKELETON_VARIANTS, SPARK_VARIANTS, SWITCH_VARIANTS, TAB_INDICATORS, TIP_PLACEMENTS, TOAST_POSITIONS, TOGGLE_VARIANTS, WEATHER_CONDITIONS, WIDGETS, WIDGET_TAGS, badgeProgress, cartTotal, defineAddToCart, defineBadgeWall, defineBarChart, defineCarousel, defineCartDrawer, defineChatComposer, defineClockControl, defineCodeExport, defineColorPicker, defineCommandPalette, defineCompare, defineCountdown, defineCubeGallery, defineDatePicker, defineDisclosure, defineDock, defineEqualizer, defineFestivalBanner, defineField, defineFileDrop, defineGauge, defineGestureSticker, defineGlobe, defineGyroCard, defineHudPanel, defineHydrate, defineKanban, defineKeyframeEditor, defineKpi, defineLeaderboard, defineLiquidNav, defineLocationCard, defineLyrics, defineMasonryFlow, defineMenu, defineMenuToggle, defineMessageList, defineMilestones, defineModal, defineMotion, defineMusicPlayer, defineNavMorph, defineNotificationBell, defineOdometer, defineOrganicCard, defineOtp, definePagination, definePanorama, definePluginStore, definePresence, definePrizeWheel, defineProductGallery, defineProgressRing, definePropPanel, definePullCord, defineRadar, defineReactions, defineRedEnvelope, defineRetroButton, defineSegmented, defineSheet, defineShortcut, defineSkeletonReveal, defineSketchChart, defineSparkline, defineSpatialCard, defineStarRating, defineStepper, defineStickyWall, defineStories, defineSuggestionChips, defineSwipeDeck, defineSwitch, defineTabBar, defineTerminal, defineThemeSurface, defineThemeSwitcher, defineTip, defineToastStack, defineUploadProgress, defineVoiceButton, defineVolumeKnob, defineWeatherCard, defineWidgets, defineXpBar, describeComponent, exportComponent, formatBytes, formatDistance, fuzzyMatch, haversine, hexToHsv, hsvToHex, initials, keyLabels, levelFor, matchesKeys, monthGrid, pageWindow, parseChips, parseISODate, parseLRC, parseMarkers, parseProps, parseReactions, parseTargets, passwordStrength, project, rankRows, sanitizeCode, sparkPoints, splitTime, stackToast, waveBars, wheelAngle, wrapIndex };
|
|
1780
|
-
export type { BellNotice, CartItem, ChatMessage, ExportFormat, ExportedNode, GlobeMarker, LeaderRow, PaletteCommand, PresenceState, PropSpec, RadarTarget, StackToastOptions, StickerState, UsaAddToCartElement, UsaBadgeWallElement, UsaBarChartElement, UsaCarouselElement, UsaCartDrawerElement, UsaChatComposerElement, UsaClockControlElement, UsaCodeExportElement, UsaColorPickerElement, UsaCommandPaletteElement, UsaCompareElement, UsaCountdownElement, UsaCubeGalleryElement, UsaDatePickerElement, UsaDisclosureElement, UsaDockElement, UsaEqualizerElement, UsaFestivalBannerElement, UsaFieldElement, UsaFileDropElement, UsaGaugeElement, UsaGestureStickerElement, UsaGlobeElement, UsaGyroCardElement, UsaHudPanelElement, UsaHydrateElement, UsaKanbanElement, UsaKeyframeEditorElement, UsaKpiElement, UsaLeaderboardElement, UsaLiquidNavElement, UsaLocationCardElement, UsaLyricsElement, UsaMasonryFlowElement, UsaMenuElement, UsaMenuToggleElement, UsaMessageListElement, UsaMilestonesElement, UsaModalElement, UsaMotionElement, UsaMusicPlayerElement, UsaNavMorphElement, UsaNotificationBellElement, UsaOdometerElement, UsaOrganicCardElement, UsaOtpElement, UsaPaginationElement, UsaPanoramaElement, UsaPluginStoreElement, UsaPresenceElement, UsaPrizeWheelElement, UsaProductGalleryElement, UsaProgressRingElement, UsaPropPanelElement, UsaPullCordElement, UsaRadarElement, UsaReactionsElement, UsaRedEnvelopeElement, UsaRetroButtonElement, UsaSegmentedElement, UsaSheetElement, UsaShortcutElement, UsaSkeletonRevealElement, UsaSketchChartElement, UsaSparklineElement, UsaSpatialCardElement, UsaStarRatingElement, UsaStepperElement, UsaStickyWallElement, UsaStoriesElement, UsaSuggestionChipsElement, UsaSwipeDeckElement, UsaSwitchElement, UsaTabBarElement, UsaTerminalElement, UsaThemeSurfaceElement, UsaThemeSwitcherElement, UsaTipElement, UsaToastStackElement, UsaUploadProgressElement, UsaVoiceButtonElement, UsaVolumeKnobElement, UsaWeatherCardElement, UsaXpBarElement, WallBadge };
|
|
1883
|
+
export { CAROUSEL_EFFECTS, EQ_PRESETS, FESTIVAL_THEMES, LOTTIE_ICONS, MENU_EFFECTS, MODAL_EFFECTS, NAV_INDICATORS, PRESENCE_STATES, PROGRESS_VARIANTS, RETRO_VARIANTS, SEGMENTED_VARIANTS, SHEET_SIDES, SKELETON_VARIANTS, SPARK_VARIANTS, SWITCH_VARIANTS, TAB_INDICATORS, TIP_PLACEMENTS, TOAST_POSITIONS, TOGGLE_VARIANTS, WEATHER_CONDITIONS, WIDGETS, WIDGET_TAGS, badgeProgress, cartTotal, defineAddToCart, defineBadgeWall, defineBarChart, defineCarousel, defineCartDrawer, defineChapterNav, defineChatComposer, defineClockControl, defineCodeExport, defineColorPicker, defineCommandPalette, defineCompare, defineCountdown, defineCubeGallery, defineDatePicker, defineDisclosure, defineDock, defineEqualizer, defineFestivalBanner, defineField, defineFileDrop, defineGauge, defineGestureSticker, defineGlobe, defineGyroCard, defineHudPanel, defineHydrate, defineKanban, defineKeyframeEditor, defineKpi, defineLeaderboard, defineLiquidNav, defineLocationCard, defineLottie, defineLottieIcon, defineLyrics, defineMasonryFlow, defineMenu, defineMenuToggle, defineMessageList, defineMilestones, defineModal, defineMotion, defineMusicPlayer, defineNavMorph, defineNotificationBell, defineOdometer, defineOrganicCard, defineOtp, definePagination, definePanorama, definePluginStore, definePresence, definePrizeWheel, defineProductGallery, defineProgressRing, definePropPanel, definePullCord, defineRadar, defineReactions, defineRedEnvelope, defineRetroButton, defineScene, defineSegmented, defineSheet, defineShortcut, defineSkeletonReveal, defineSketchChart, defineSparkline, defineSpatialCard, defineStarRating, defineStepper, defineStickyWall, defineStories, defineSuggestionChips, defineSwipeDeck, defineSwitch, defineTabBar, defineTerminal, defineThemeSurface, defineThemeSwitcher, defineTip, defineToastStack, defineUploadProgress, defineVoiceButton, defineVolumeKnob, defineWeatherCard, defineWidgets, defineXpBar, describeComponent, exportComponent, formatBytes, formatDistance, fuzzyMatch, haversine, hexToHsv, hsvToHex, initials, keyLabels, levelFor, matchesKeys, monthGrid, pageWindow, parseChips, parseISODate, parseLRC, parseMarkers, parseProps, parseReactions, parseTargets, passwordStrength, project, rankRows, sanitizeCode, sparkPoints, splitTime, stackToast, waveBars, wheelAngle, wrapIndex };
|
|
1884
|
+
export type { BellNotice, CartItem, ChatMessage, ExportFormat, ExportedNode, GlobeMarker, LeaderRow, PaletteCommand, PresenceState, PropSpec, RadarTarget, StackToastOptions, StickerState, UsaAddToCartElement, UsaBadgeWallElement, UsaBarChartElement, UsaCarouselElement, UsaCartDrawerElement, UsaChapterNavElement, UsaChatComposerElement, UsaClockControlElement, UsaCodeExportElement, UsaColorPickerElement, UsaCommandPaletteElement, UsaCompareElement, UsaCountdownElement, UsaCubeGalleryElement, UsaDatePickerElement, UsaDisclosureElement, UsaDockElement, UsaEqualizerElement, UsaFestivalBannerElement, UsaFieldElement, UsaFileDropElement, UsaGaugeElement, UsaGestureStickerElement, UsaGlobeElement, UsaGyroCardElement, UsaHudPanelElement, UsaHydrateElement, UsaKanbanElement, UsaKeyframeEditorElement, UsaKpiElement, UsaLeaderboardElement, UsaLiquidNavElement, UsaLocationCardElement, UsaLottieElement, UsaLottieIconElement, UsaLyricsElement, UsaMasonryFlowElement, UsaMenuElement, UsaMenuToggleElement, UsaMessageListElement, UsaMilestonesElement, UsaModalElement, UsaMotionElement, UsaMusicPlayerElement, UsaNavMorphElement, UsaNotificationBellElement, UsaOdometerElement, UsaOrganicCardElement, UsaOtpElement, UsaPaginationElement, UsaPanoramaElement, UsaPluginStoreElement, UsaPresenceElement, UsaPrizeWheelElement, UsaProductGalleryElement, UsaProgressRingElement, UsaPropPanelElement, UsaPullCordElement, UsaRadarElement, UsaReactionsElement, UsaRedEnvelopeElement, UsaRetroButtonElement, UsaSceneElement, UsaSegmentedElement, UsaSheetElement, UsaShortcutElement, UsaSkeletonRevealElement, UsaSketchChartElement, UsaSparklineElement, UsaSpatialCardElement, UsaStarRatingElement, UsaStepperElement, UsaStickyWallElement, UsaStoriesElement, UsaSuggestionChipsElement, UsaSwipeDeckElement, UsaSwitchElement, UsaTabBarElement, UsaTerminalElement, UsaThemeSurfaceElement, UsaThemeSwitcherElement, UsaTipElement, UsaToastStackElement, UsaUploadProgressElement, UsaVoiceButtonElement, UsaVolumeKnobElement, UsaWeatherCardElement, UsaXpBarElement, WallBadge };
|