# Editorial Orbs

> Bouncing glowing orbs with text that dynamically flows around them in multi-column layout with drop caps and pull quotes.

<demo-editorial-orbs>



</demo-editorial-orbs>

## Installation

```bash
npx shadcn-vue@latest add "https://nxui.geoql.in/r/editorial-orbs.json"
```

## Usage

```vue
<script setup lang="ts">
  import EditorialOrbs from '~/components/ui/editorial-orbs/EditorialOrbs.vue';
</script>

<template>
  <EditorialOrbs class="size-full" :orb-count="5" />
</template>
```

## Props

<table>
<thead>
  <tr>
    <th>
      Prop
    </th>
    
    <th>
      Type
    </th>
    
    <th>
      Default
    </th>
    
    <th>
      Description
    </th>
  </tr>
</thead>

<tbody>
  <tr>
    <td>
      text
    </td>
    
    <td>
      <code>
        string
      </code>
    </td>
    
    <td>
      <code>
        'Alice was beginning...'
      </code>
    </td>
    
    <td>
      Body text content to flow
    </td>
  </tr>
  
  <tr>
    <td>
      orb-count
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        5
      </code>
    </td>
    
    <td>
      Number of bouncing orbs
    </td>
  </tr>
  
  <tr>
    <td>
      show-drop-cap
    </td>
    
    <td>
      <code>
        boolean
      </code>
    </td>
    
    <td>
      <code>
        true
      </code>
    </td>
    
    <td>
      Show decorative drop cap
    </td>
  </tr>
  
  <tr>
    <td>
      show-pull-quotes
    </td>
    
    <td>
      <code>
        boolean
      </code>
    </td>
    
    <td>
      <code>
        true
      </code>
    </td>
    
    <td>
      Show pull quote blocks
    </td>
  </tr>
  
  <tr>
    <td>
      class
    </td>
    
    <td>
      <code>
        string
      </code>
    </td>
    
    <td>
      <code>
        undefined
      </code>
    </td>
    
    <td>
      Additional CSS classes
    </td>
  </tr>
</tbody>
</table>