use-scroll-animate 9.1.0 → 9.3.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-genart.cjs +137 -0
- package/dist/components/fx-genart.cjs.map +1 -0
- package/dist/components/fx-genart.d.cts +69 -0
- package/dist/components/fx-genart.d.ts +69 -0
- package/dist/components/fx-genart.js +131 -0
- package/dist/components/fx-genart.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 +16 -0
- package/dist/components/fx2.cjs.map +1 -1
- package/dist/components/fx2.d.cts +69 -1
- package/dist/components/fx2.d.ts +69 -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 +629 -171
- package/dist/components/widgets.cjs.map +1 -1
- package/dist/components/widgets.d.cts +105 -2
- package/dist/components/widgets.d.ts +105 -2
- package/dist/components/widgets.js +624 -172
- 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 +31 -0
- package/package.json +41 -1
|
@@ -1702,6 +1702,105 @@ interface UsaSceneElement extends UsaElement {
|
|
|
1702
1702
|
}
|
|
1703
1703
|
declare function defineScene(tag?: string): CustomElementConstructor | undefined;
|
|
1704
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
|
+
|
|
1771
|
+
/**
|
|
1772
|
+
* `<usa-gen-art art="flow" seed="7" palette="ocean">` (9.3) — seeded
|
|
1773
|
+
* generative artwork on a canvas: `flow` (particles tracing a flow field),
|
|
1774
|
+
* `circles` (circle packing), `truchet` (quarter-arc tiles) or `waves`
|
|
1775
|
+
* (layered sine ridges). It draws itself in when it scrolls into view;
|
|
1776
|
+
* click / Enter re-seeds (`usa:generate` { seed }). `seed`, `palette`
|
|
1777
|
+
* (`PALETTES` name), `label`; `generate(seed?)`, `toDataURL()`. A focusable
|
|
1778
|
+
* `img`; reduced motion: drawn at once.
|
|
1779
|
+
*/
|
|
1780
|
+
interface UsaGenArtElement extends UsaElement {
|
|
1781
|
+
readonly seed: number;
|
|
1782
|
+
generate(seed?: number): void;
|
|
1783
|
+
toDataURL(type?: string): string;
|
|
1784
|
+
}
|
|
1785
|
+
declare function defineGenArt(tag?: string): CustomElementConstructor | undefined;
|
|
1786
|
+
|
|
1787
|
+
/**
|
|
1788
|
+
* `<usa-bg-generator>` (9.3) — a background generator: pick a palette,
|
|
1789
|
+
* a style (`mesh` gradient, `grain` mesh, `stripes`, `dots`) and a seed
|
|
1790
|
+
* (shuffle button), see it live with a cross-fade, and copy the CSS
|
|
1791
|
+
* (`background: …`). `palette`, `style`, `seed`; `css` property,
|
|
1792
|
+
* `shuffle()`, `copy()`; `usa:change` { css, seed }. A labelled `group`
|
|
1793
|
+
* of real form controls; reduced motion: no cross-fade.
|
|
1794
|
+
*/
|
|
1795
|
+
interface UsaBgGeneratorElement extends UsaElement {
|
|
1796
|
+
readonly css: string;
|
|
1797
|
+
shuffle(): void;
|
|
1798
|
+
copy(): Promise<boolean>;
|
|
1799
|
+
}
|
|
1800
|
+
/** The CSS background for a generator state (9.3). */
|
|
1801
|
+
declare function backgroundCss(style: string, seed: number, palette: string): string;
|
|
1802
|
+
declare function defineBgGenerator(tag?: string): CustomElementConstructor | undefined;
|
|
1803
|
+
|
|
1705
1804
|
/**
|
|
1706
1805
|
* motionary/components/widgets — the 6.x animated UI widgets, in their own
|
|
1707
1806
|
* entry so `motionary/components` and `components/lite` keep their size
|
|
@@ -1809,8 +1908,12 @@ declare global {
|
|
|
1809
1908
|
'usa-plugin-store': UsaPluginStoreElement;
|
|
1810
1909
|
'usa-chapter-nav': UsaChapterNavElement;
|
|
1811
1910
|
'usa-scene': UsaSceneElement;
|
|
1911
|
+
'usa-lottie': UsaLottieElement;
|
|
1912
|
+
'usa-lottie-icon': UsaLottieIconElement;
|
|
1913
|
+
'usa-gen-art': UsaGenArtElement;
|
|
1914
|
+
'usa-bg-generator': UsaBgGeneratorElement;
|
|
1812
1915
|
}
|
|
1813
1916
|
}
|
|
1814
1917
|
|
|
1815
|
-
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, 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, 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 };
|
|
1816
|
-
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, 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 };
|
|
1918
|
+
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, backgroundCss, badgeProgress, cartTotal, defineAddToCart, defineBadgeWall, defineBarChart, defineBgGenerator, defineCarousel, defineCartDrawer, defineChapterNav, defineChatComposer, defineClockControl, defineCodeExport, defineColorPicker, defineCommandPalette, defineCompare, defineCountdown, defineCubeGallery, defineDatePicker, defineDisclosure, defineDock, defineEqualizer, defineFestivalBanner, defineField, defineFileDrop, defineGauge, defineGenArt, 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 };
|
|
1919
|
+
export type { BellNotice, CartItem, ChatMessage, ExportFormat, ExportedNode, GlobeMarker, LeaderRow, PaletteCommand, PresenceState, PropSpec, RadarTarget, StackToastOptions, StickerState, UsaAddToCartElement, UsaBadgeWallElement, UsaBarChartElement, UsaBgGeneratorElement, UsaCarouselElement, UsaCartDrawerElement, UsaChapterNavElement, UsaChatComposerElement, UsaClockControlElement, UsaCodeExportElement, UsaColorPickerElement, UsaCommandPaletteElement, UsaCompareElement, UsaCountdownElement, UsaCubeGalleryElement, UsaDatePickerElement, UsaDisclosureElement, UsaDockElement, UsaEqualizerElement, UsaFestivalBannerElement, UsaFieldElement, UsaFileDropElement, UsaGaugeElement, UsaGenArtElement, 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 };
|
|
@@ -1702,6 +1702,105 @@ interface UsaSceneElement extends UsaElement {
|
|
|
1702
1702
|
}
|
|
1703
1703
|
declare function defineScene(tag?: string): CustomElementConstructor | undefined;
|
|
1704
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
|
+
|
|
1771
|
+
/**
|
|
1772
|
+
* `<usa-gen-art art="flow" seed="7" palette="ocean">` (9.3) — seeded
|
|
1773
|
+
* generative artwork on a canvas: `flow` (particles tracing a flow field),
|
|
1774
|
+
* `circles` (circle packing), `truchet` (quarter-arc tiles) or `waves`
|
|
1775
|
+
* (layered sine ridges). It draws itself in when it scrolls into view;
|
|
1776
|
+
* click / Enter re-seeds (`usa:generate` { seed }). `seed`, `palette`
|
|
1777
|
+
* (`PALETTES` name), `label`; `generate(seed?)`, `toDataURL()`. A focusable
|
|
1778
|
+
* `img`; reduced motion: drawn at once.
|
|
1779
|
+
*/
|
|
1780
|
+
interface UsaGenArtElement extends UsaElement {
|
|
1781
|
+
readonly seed: number;
|
|
1782
|
+
generate(seed?: number): void;
|
|
1783
|
+
toDataURL(type?: string): string;
|
|
1784
|
+
}
|
|
1785
|
+
declare function defineGenArt(tag?: string): CustomElementConstructor | undefined;
|
|
1786
|
+
|
|
1787
|
+
/**
|
|
1788
|
+
* `<usa-bg-generator>` (9.3) — a background generator: pick a palette,
|
|
1789
|
+
* a style (`mesh` gradient, `grain` mesh, `stripes`, `dots`) and a seed
|
|
1790
|
+
* (shuffle button), see it live with a cross-fade, and copy the CSS
|
|
1791
|
+
* (`background: …`). `palette`, `style`, `seed`; `css` property,
|
|
1792
|
+
* `shuffle()`, `copy()`; `usa:change` { css, seed }. A labelled `group`
|
|
1793
|
+
* of real form controls; reduced motion: no cross-fade.
|
|
1794
|
+
*/
|
|
1795
|
+
interface UsaBgGeneratorElement extends UsaElement {
|
|
1796
|
+
readonly css: string;
|
|
1797
|
+
shuffle(): void;
|
|
1798
|
+
copy(): Promise<boolean>;
|
|
1799
|
+
}
|
|
1800
|
+
/** The CSS background for a generator state (9.3). */
|
|
1801
|
+
declare function backgroundCss(style: string, seed: number, palette: string): string;
|
|
1802
|
+
declare function defineBgGenerator(tag?: string): CustomElementConstructor | undefined;
|
|
1803
|
+
|
|
1705
1804
|
/**
|
|
1706
1805
|
* motionary/components/widgets — the 6.x animated UI widgets, in their own
|
|
1707
1806
|
* entry so `motionary/components` and `components/lite` keep their size
|
|
@@ -1809,8 +1908,12 @@ declare global {
|
|
|
1809
1908
|
'usa-plugin-store': UsaPluginStoreElement;
|
|
1810
1909
|
'usa-chapter-nav': UsaChapterNavElement;
|
|
1811
1910
|
'usa-scene': UsaSceneElement;
|
|
1911
|
+
'usa-lottie': UsaLottieElement;
|
|
1912
|
+
'usa-lottie-icon': UsaLottieIconElement;
|
|
1913
|
+
'usa-gen-art': UsaGenArtElement;
|
|
1914
|
+
'usa-bg-generator': UsaBgGeneratorElement;
|
|
1812
1915
|
}
|
|
1813
1916
|
}
|
|
1814
1917
|
|
|
1815
|
-
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, 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, 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 };
|
|
1816
|
-
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, 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 };
|
|
1918
|
+
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, backgroundCss, badgeProgress, cartTotal, defineAddToCart, defineBadgeWall, defineBarChart, defineBgGenerator, defineCarousel, defineCartDrawer, defineChapterNav, defineChatComposer, defineClockControl, defineCodeExport, defineColorPicker, defineCommandPalette, defineCompare, defineCountdown, defineCubeGallery, defineDatePicker, defineDisclosure, defineDock, defineEqualizer, defineFestivalBanner, defineField, defineFileDrop, defineGauge, defineGenArt, 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 };
|
|
1919
|
+
export type { BellNotice, CartItem, ChatMessage, ExportFormat, ExportedNode, GlobeMarker, LeaderRow, PaletteCommand, PresenceState, PropSpec, RadarTarget, StackToastOptions, StickerState, UsaAddToCartElement, UsaBadgeWallElement, UsaBarChartElement, UsaBgGeneratorElement, UsaCarouselElement, UsaCartDrawerElement, UsaChapterNavElement, UsaChatComposerElement, UsaClockControlElement, UsaCodeExportElement, UsaColorPickerElement, UsaCommandPaletteElement, UsaCompareElement, UsaCountdownElement, UsaCubeGalleryElement, UsaDatePickerElement, UsaDisclosureElement, UsaDockElement, UsaEqualizerElement, UsaFestivalBannerElement, UsaFieldElement, UsaFileDropElement, UsaGaugeElement, UsaGenArtElement, 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 };
|