Bouncing glowing orbs with text that dynamically flows around them in multi-column layout with drop caps and pull quotes.
$ npx shadcn-vue@latest add "https://nxui.geoql.in/r/editorial-orbs.json"Keep in mind
This component is inspired by various open-source projects and patterns. Please verify licenses and implementation details before using in production.
<script setup lang="ts">
import EditorialOrbs from '~/components/ui/editorial-orbs/EditorialOrbs.vue';
</script>
<template>
<EditorialOrbs class="size-full" :orb-count="5" />
</template>
| Prop | Type | Default | Description |
|---|---|---|---|
| text | string | 'Alice was beginning...' | Body text content to flow |
| orb-count | number | 5 | Number of bouncing orbs |
| show-drop-cap | boolean | true | Show decorative drop cap |
| show-pull-quotes | boolean | true | Show pull quote blocks |
| class | string | undefined | Additional CSS classes |