Interactive Beam Animations

Learn how to create stunning animated node-connection diagrams with interactive hover effects and advanced styling options.

Overview

The Beam Animation system lets you create visual diagrams with animated connections between nodes. Perfect for showcasing workflows, technology stacks, or interconnected concepts on your homepage.

Key Features

• Visual Editor: Drag-and-drop canvas interface
• Interactive Elements: Hover cards and click animations
• Advanced Styling: 17+ customization options
• Global Configuration: Set defaults for all connections
• Accessibility: Full keyboard navigation support
• Live Preview: See changes in real-time

---

Getting Started

Accessing the Editor

1. Navigate to Admin Dashboard → UI Configuration → Homepage
2. Click on a bento block or create a new one
3. Set Background Type to "Animation"
4. Select Animation Type: "Beam"
5. The Beam Visual Editor will appear

Understanding the Interface

The editor is divided into three sections:

1. Toolbar (top): Mode selection, add nodes, canvas settings
2. Canvas (left): Visual editing area with nodes and connections
3. Properties (right): Configure selected elements

---

Creating Your First Animation

Step 1: Add Nodes

Click one of the add node buttons in the toolbar:

• Emoji - Use any emoji character (🎨, 🚀, ⭐)
• Lucide - Choose from 1000+ Lucide icons
• SVG - Upload custom SVG files

Example:

Add three emoji nodes:
- Node 1: 🎨 (Design)
- Node 2: ⚡ (Development)
- Node 3: 🚀 (Launch)

Step 2: Position Nodes

Mouse:

• Drag nodes to desired positions
• Enable Grid Snap for aligned placement

Keyboard:

• Select a node (click or Tab key)
• Use Arrow Keys to move (Shift for larger steps)

Step 3: Create Connections

1. Click the Connect button in toolbar
2. Click the starting node (source)
3. Click the ending node (destination)
4. Connection appears with default styling
5. Click Select button to return to select mode

Step 4: Customize Styling

Select a connection and adjust properties:

• Animation Speed: Fast, Normal, or Slow
• Curvature: Bend the connection line (-100 to 100)
• Colors: Gradient start and stop colors
• Line Style: Solid, dashed, or dotted
• Arrow: Enable/disable directional arrow

---

Global Styling

Set default styles for all connections to maintain consistency.

How to Access

1. Deselect all nodes and beams (click empty canvas or press Escape)
2. The properties panel shows "Global Beam Styling"

What You Can Configure

Animation:

• Animation Speed (1-10 seconds)
• Delay between animations

Visual:

• Line Width (1-10px)
• Line Opacity (10-100%)
• Curvature (-100 to 100)
• Gradient colors

Advanced:

• Line style (solid/dashed/dotted)
• Line cap style
• Arrow customization
• Glow effects

Individual Overrides

Any property set on an individual beam overrides the global default:

Global: Animation Speed = Normal (5s)
Beam 1: (no override) → Uses 5s
Beam 2: Animation Speed = Fast (2s) → Uses 2s
Beam 3: (no override) → Uses 5s

The properties panel shows "(using global)" for inherited values.

Reset Styling

• Reset Style (individual beam): Removes all custom styling, reverts to global
• Reset (global panel): Restores all global settings to defaults

---

Interactive Features

Make your animations come alive with hover and click effects!

Node Hover Content

Display rich information when users hover over nodes.

To Configure:

1. Select a node
2. Scroll to "Interactive Features" section
3. Toggle "Hover Content" ON
4. Add:
   • Title: Short heading (e.g., "React")
   • Description: Detailed text (Markdown supported!)

Markdown Support:

**Bold** text for emphasis
*Italic* for style
- Bullet points
- More bullets

Example:

Title: React
Description: **Modern** JavaScript library for building *user interfaces*.
Perfect for creating dynamic web applications.

Hover Effects

Add visual effects that trigger on hover:

Scale Effect

• Enlarges the node (1.0x to 2.0x)
• Smooth animation transition
• Great for drawing attention

Glow Effect

• Colored drop shadow around node
• Intensity: Low, Medium, or High
• Choose custom glow color

Beam Control

• Affect connected beam animations during hover
• Options:
  • Pause: Stop animations
  • Slow: Reduce speed by 50%
  • Speed Up: Increase speed by 2x

Pro Tip: Combine scale + glow for maximum impact!

Click Actions

Trigger animations when users click nodes.

Available Actions:

1. Highlight Connections: Brighten all connected beams
2. Pulse Effect: Animated scaling pulse on the node
3. Ripple Effect: Expanding circle ripple animation
4. Duration: How long the effect lasts (0.5-5 seconds)

Example Configuration:

✓ Highlight Connections
✓ Pulse Effect
✗ Ripple Effect
Duration: 1.5s

---

Advanced Styling Options

Line Styles

Solid:

• Default continuous line
• Best for primary connections

Dashed:

• Segmented line with gaps
• Configure dash and gap lengths
• Great for secondary or optional connections

Dotted:

• Small dots with gaps
• Subtle, decorative style

Line Caps

Control how line endpoints are rendered:

• Butt: Flat edge (default)
• Round: Rounded edge (smooth)
• Square: Extended flat edge

Arrows

Customization:

• Show/Hide: Toggle directional arrow
• Arrow Size: 5-20px

Best Practices:

• Use arrows to show data flow or process direction
• Disable for bidirectional relationships

Glow Effects

Add luminous glow around connection lines.

Configuration:

• Enable/Disable: Toggle glow effect
• Color: Match your brand or create contrast
• Intensity: 2-20px blur radius

Use Cases:

• Highlight important connections
• Create a futuristic aesthetic
• Draw attention to specific paths

---

Keyboard Shortcuts

Work faster with keyboard navigation!

Selection

• Tab: Cycle forward through nodes
• Shift+Tab: Cycle backward through nodes
• Escape: Deselect current selection

Editing

• Arrow Keys: Move selected node (1px steps)
• Shift+Arrow: Move selected node (10px steps)
• Delete or Backspace: Delete selected node/beam

Actions

• Enter or Space: Select focused node/beam in canvas

Tips

• Use Tab to quickly navigate between nodes
• Arrow keys provide precise positioning
• Combine Shift+Arrow for faster movement

---

Best Practices

Design Guidelines

Node Placement:

• Leave adequate spacing between nodes (avoid overlap)
• Use grid snap for aligned layouts
• Create visual hierarchy with positioning

Color Choices:

• Use gradient colors that match your brand
• Ensure sufficient contrast for visibility
• Consider dark/light mode compatibility

Animation Speed:

• Fast (1-2s): Energetic, dynamic feel
• Normal (3-5s): Balanced, comfortable viewing
• Slow (6-10s): Calm, professional appearance

Performance Optimization

Number of Nodes:

• Optimal: 5-10 nodes
• Maximum: 15-20 nodes
• Beyond 20: Consider multiple blocks

Animation Complexity:

• Limit glow effects to key connections
• Use solid lines for better performance than dashed
• Disable unused interactive features

Accessibility

Always Provide:

• Meaningful node labels
• Descriptive hover content titles
• Sufficient color contrast

Keyboard Users:

• Test all interactions with keyboard only
• Ensure logical Tab order
• Provide clear focus indicators

---

Examples

Example 1: Simple Tech Stack

Nodes:

• 🎨 Frontend (left)
• ⚙️ Backend (center)
• 🗄️ Database (right)

Connections:

• Frontend → Backend (solid, blue gradient)
• Backend → Database (dashed, green gradient)

Global Style:

• Animation Speed: Normal (4s)
• Line Width: 3px
• Curvature: 20 (gentle curve upward)

Example 2: Process Flow

Nodes:

• 📝 Plan
• 🛠️ Build
• 🧪 Test
• 🚀 Deploy

Connections:

• Sequential connections with arrows
• Dashed style for "optional" paths
• Highlight effect on hover

Interactive Features:

• Hover cards explain each step
• Click to highlight entire flow path

Example 3: Interconnected Services

Nodes:

• Central "API" node
• Surrounding service nodes in a circle

Connections:

• All services connect to central API
• Radial layout (curvature varies per beam)
• Glow effects on active connections

Styling:

• Individual colors per service connection
• Faster animation for high-priority services

---

Troubleshooting

Canvas Issues

Problem: Can't deselect node/beam

• Solution: Click on empty canvas area or press Escape

Problem: Nodes snap to wrong positions

• Solution: Disable "Grid Snap" in toolbar for free positioning

Problem: Can't see uploaded SVG

• Solution: Ensure SVG file was uploaded successfully. Check that node type is "Custom"

Styling Issues

Problem: Global styling not applying

• Solution: Individual beam overrides take precedence. Use "Reset Style" button on beam

Problem: Changes not saving

• Solution: Click "Save" button in BlockEditorDialog before closing

Problem: Curvature not visible

• Solution: Increase curvature value beyond ±20 for noticeable curves

Performance Issues

Problem: Animations laggy with many nodes

• Solution: Reduce node count, disable glow effects, or use solid lines

Problem: Canvas slow when dragging

• Solution: Disable grid snap, reduce number of connections

---

FAQ

Q: How many nodes can I add? A: Technically unlimited, but recommend 5-15 for best performance and visual clarity.

Q: Can I import/export configurations? A: Not currently available. Planned for future release.

Q: Do animations work on mobile? A: Yes! Animations are responsive, but hover effects require mouse/trackpad.

Q: Can I use custom fonts in hover cards? A: Hover cards inherit site typography. Custom fonts not currently supported.

Q: How do I duplicate a node? A: Copy/paste feature coming soon. Currently, manually create new node with same settings.

Q: Can I animate nodes (not just connections)? A: Node animations during interactions only. Full node animation planned for future.

---

Next Steps

• Explore Technical Documentation for developer details
• Check out Homepage Configuration Guide for layout options
• Learn about Sanity CMS Integration for content management

---

Need Help?

If you encounter issues or have questions:

1. Check the Technical Documentation
2. Review this guide for common solutions
3. Contact the development team

Last Updated: October 31, 2025