Eldora UI Documentation

To prevent unnecessary re-renders of your entire component tree, keep animation state (like scroll progress or timer values) isolated within a dedicated component. If the state is held in a parent component, every update will trigger a re-render of all its children, causing animation jank.

// Good: Isolated animation component
function Page() {
  return (
    <div>
      <ScrollProgress /> {/* Self-contained, no parent re-renders */}
      <ExpensiveContent />
    </div>
  )
}

The Cobe component supports several interaction and layout variants via the variant prop:

• default: Interactive globe with both drag functionality and continuous auto-rotation.
• draggable: Pure drag interaction; no auto-rotation.
• auto-draggable: Auto-rotates by default, but pauses rotation when the user drags it.
• auto-rotation: Pure auto-rotation; no user interaction allowed.
• rotate-to-location: Interactive globe with clickable location buttons for navigation (requires locations prop).
• scaled: A horizontally-oriented version optimized for wide layouts and banners.

The AnimatedList component operates in a continuous loop through four distinct animation phases:

1. Idle: Items are stacked with scale and opacity effects.
2. Forming Column: Items animate to form a vertical column.
3. Scrolling Down: The entire list scrolls downward.
4. Resetting: Items return to their initial stacked position.

The Cobe component supports six distinct interaction modes via the variant prop:

1. default: Combines continuous auto-rotation with drag interaction. Auto-rotation resumes after a user releases a drag.
2. draggable: Pure drag interaction with no auto-rotation. The globe stays still until interacted with.
3. auto-draggable: Auto-rotates until the user drags. After the user releases, the globe stays where they left it (no auto-rotation resumes).
4. auto-rotation: Pure auto-rotation with no user interaction. Best for purely decorative background elements.
5. rotate-to-location: Renders clickable location buttons. Clicking a location smoothly rotates the globe to center that specific coordinate. Requires a locations array.
6. scaled: Renders a horizontally-oriented globe optimized for wide layouts and banners.

To achieve a seamless, infinite scrolling effect, follow these best practices for configuring LogoItem properties:

• Staggering Animations: Use negative animationDelay values (e.g., -23) to stagger logo animations. This prevents all logos from moving in perfect unison and creates a more natural flow.
• Row Organization: Use the row property (1-based index) to group logos. Logos with the same row value will appear on the same horizontal line.
• Synchronized Movement: For logos on the same row, use the same animationDuration (typically between 30-65 seconds) to ensure they move together smoothly.
• Icon Selection: The icon property must be a valid key from the Icons object exported from @/components/icons. Common keys include react, ts, tailwind, gitHub, discord, openai, v0, and radix.

The animation style changes significantly based on the direction prop:

• "in": Animates each word individually with a fade-in effect. Controlled by wordDelay.
• "up": Animates the entire text sliding up from below using a spring transition. Controlled by staggerDelay.
• "down": Animates the entire text sliding down from above using a spring transition. Controlled by staggerDelay.

EldoraUI text animations can be categorized into four motion styles to help you choose the right tone for your interface:

• Subtle: Gentle reveals that don't distract from content (e.g., BlurIn, FadeText).
• Rhythmic: Sequential animations that create a cadence (e.g., WordPullUpText, LetterPullUpText, GradualSpacingText).
• Dramatic: Bold movements that demand attention (e.g., SeparateAwayText, MultiDirectionSlideText).
• Playful: Interactive or looping animations that add personality (e.g., WavyText, ScaleLetterText, DockText).

You can install the Photon Beam component using the shadcn CLI or by manual installation.

Via CLI

Run the following command to add the component directly to your project:

npx shadcn@latest add "https://eldoraui.site/r/photon-beam"

Manual Installation

1. Copy the source code for components/eldoraui/photon-beam.tsx into your project.
2. Update any import paths within the file to match your project's directory structure.

You can install the Testimonial Slider component using the shadcn CLI or by manual installation.

Using CLI

Run the following command to add the component to your project:

npx shadcn@latest add @eldoraui/testimonal-slider

Manual Installation

1. Copy the component source code into components/eldoraui/testimonal-slider.tsx.
2. Update the import paths within the file to match your project's directory structure.