Astro
Action menu
Declarative items · event helpers
Native TypeScript · Astro · Vue 3
Liquid interfaces,
not decorative blobs.
Practical menus and form controls built on one isolated SVG liquid engine.
No framework runtime
Astro UI recipes
Real controls using the package components directly
Astro
Email composer
Real input · submit state
Notification switch
Button semantics
Intensity
Native range · styled
Quantity
Separated liquid actions
Tune the engine
Interactive playground
Every option updates the Astro components in real time
Effect
Start here
Two native integrations
npm install @danixts/liquid-gooey
import { LiquidGroup, LiquidItem } from '@danixts/liquid-gooey/astro'
import { updateLiquidItem } from '@danixts/liquid-gooey/astro/client'
<LiquidGroup class="menu" blur={7} contrast={19} fill="#fff">
<LiquidItem as="button" id="action" transition="bouncy">Add</LiquidItem>
</LiquidGroup>
<script>
const action = document.querySelector('#action')
if (action) updateLiquidItem(action, { x: 72, y: -48 })
</script>npm install @danixts/liquid-gooey vue
<script setup lang="ts">
import { ref } from 'vue'
import { LiquidGroup, LiquidItem } from '@danixts/liquid-gooey/vue'
const open = ref(false)
</script>
<LiquidGroup :blur="7" :contrast="19" fill="#fff">
<LiquidItem as="button" :x="open ? 72 : 0" transition="bouncy">
Add
</LiquidItem>
</LiquidGroup>AstroTyped event helpers, zero hydration
VueReactive props, automatic cleanup
NativeIndependent groups, no shared state
Reactive props
The same UI in Vue
A small client island only for the Vue comparison
Designed for reuse
One engine, isolated instances
Own surface
Every group owns its SVG filter, observer and item registry.
Typed motion
Morph, move and dissolve values share the same TypeScript contract.
Lifecycle safe
Astro navigation and Vue unmounts clean controllers and listeners.