@moonarc/core
v0.1.0
Published
Zero-runtime, ClientRouter-safe animation and motion components for Astro: scroll reveals, text effects, marquees, backgrounds and UI transitions. Every component states its measured JS cost.
Maintainers
Readme
@moonarc/core
Zero-runtime, ClientRouter-safe animation and motion components for Astro:
scroll reveals, text effects, marquees, backgrounds and UI transitions. Every
component states its JavaScript cost, measured from a real build; most ship
none. All honour reduced motion and render readable server HTML.
npx astro add moonarc---
import Reveal from '@moonarc/core/Reveal';
---
<Reveal><h2>Appears once, stays — after every navigation.</h2></Reveal>102 primitives, 67 of them load no JavaScript. By category:
- Text: SplitText, Typewriter, RotatingText, ShinyText, GradientText, CountUp, TextScramble, WeightWave, SplitFlap, TextRoll, CircularText, GlitchText, StrokeDraw, HighlightMarker, UnderlineHover, BubbleText
- Data: NumberFlow, PriceSwitch, CountdownFlip, Sparkline, BarGrow
- Scroll: Reveal, Parallax, ScrollProgress, CardStack, HorizontalScroll, ScrollScrub, StickyReveal, ScrollExpand, TracingBeam, FooterReveal, ReadingToc
- Pointer: GlyphField, CursorGrid, Tilt, Magnetic, Spotlight, Cursor, ImageTrail, Confetti, HoverImageLinks
- Backgrounds: Aurora, BorderBeam, GridPattern, DotPattern, Noise, Ripple, RetroGrid, AnimatedBeam, OrbitingCircles, Orb, ProgressiveBlur, DottedMap, Particles, Meteors, Globe
- Ticker: Marquee
- UI: Accordion, Dialog (+ morph), Popover, Tabs (+ direction), Carousel, Drawer, Toast, ShimmerButton, StatefulButton, ArrowButton, CopyButton, ThemeToggle (+ ThemeScript), AnimatedIcons, BrowserFrame, CodeTabs, PillNav, Dock, StaggerMenu, CommandPalette, StickyBanner, LinkPreview, Lightbox, ImageCompare, HoverVideo, VideoDialog, AnimatedList, FilterGrid, FileTree, Switch, CheckDraw, OtpInput, AnimatedSelect, PromptInput (+ submitOnEnter), VanishInput, AvatarStack, DynamicIsland, PhoneFrame, LiquidGlass
- Loading: Skeleton, Spinner, Progress, CounterPreloader (+ once)
- Page transitions: PageTransition, Curtain, PersistPlayer
Motion theme: <html data-ma-preset="snap|ui|gentle|lively|ambient"> retunes
every component; no component hard-codes a curve. Browser support is stated
per component (@moonarc/core/support).
Runtime for your own scripts: @moonarc/core/runtime. Toasts:
@moonarc/core/toast. GSAP and Lenis adapters:
@moonarc/core/gsap, @moonarc/core/lenis.
Docs, live demos and measured costs: https://moonarc.dev
