Animated Backgrounds

Overview

Noteverse includes several animated background components that add visual interest to feature sections. These backgrounds display interconnected cards with hover effects and animations.

Version History Background

Displays a git-style version history with branches and commits.

Import

import CardVersionHistoryBackground from '@/components/ui/version-history-background'

Usage

export default function VersionHistorySection() {
  return (
    <div className="relative min-h-screen">
      <CardVersionHistoryBackground />
      
      <div className="relative z-10 p-8">
        <h1>Version History</h1>
        <p>Track every change to your documents</p>
      </div>
    </div>
  )
}

Features

Version Cards
Branch Lines
Git Icons

Floating cards representing different versions:

<VersionCard
  version="1.0"
  description="Initial release"
  x={10}  // X position as percentage
  y={20}  // Y position as percentage
/>

Each card:

Displays version number
Shows description
Scales on hover
Has transition animations

SVG lines connecting versions:

<BranchLine 
  startX={10} 
  startY={20} 
  endX={30} 
  endY={20} 
/>

Represents:

Main branch (horizontal)
Feature branches (diagonal)
Merge points

Decorative git-related icons:

<GitBranch className="w-10 h-10 opacity-5" />
<GitMerge className="w-10 h-10 opacity-5" />
<GitCommit className="w-10 h-10 opacity-5" />

From lucide-react

Customization

<VersionCard version="2.5" description="Bug fixes" x={45} y={30} />
<VersionCard version="3.0" description="Major update" x={65} y={30} />

Styling

The background uses fixed positioning with low opacity:

className="fixed inset-0 bg-background overflow-hidden opacity-10"

Cards have hover effects:

const [isHovered, setIsHovered] = useState(false)

style={{
  transform: `translate(-50%, -50%) ${isHovered ? 'scale(1.05)' : 'scale(1)'}`,
}}

Upvote Comments Background

Displays a network of comments with floating icons.

Import

import UpvoteCommentsBackground from '@/components/ui/upvote-comments-background'

Usage

export default function CommentsSection() {
  return (
    <div className="relative min-h-[400px]">
      <UpvoteCommentsBackground />
      
      <div className="relative z-10 p-8">
        <h2>Collaborative Comments</h2>
        <p>Discuss and upvote ideas together</p>
      </div>
    </div>
  )
}

Features

Comment Cards
Connection Lines
Floating Icons

Cards showing user comments:

<CommentCard
  user="Alice"
  comment="Nice insights!"
  x={15}
  y={30}
/>

Features:

User name
Comment text
Hover scale effect
Connected by lines

SVG lines connecting comments:

<ConnectionLine 
  startX={15} 
  startY={30} 
  endX={45} 
  endY={30} 
/>

Animated icons using Framer Motion:

<FloatingIcon 
  Icon={ThumbsUpIcon} 
  x={20} 
  y={20} 
/>

Animation:

animate={{ y: [0, -5, 0] }}
transition={{
  duration: 2.5,
  repeat: Infinity,
  ease: 'easeInOut',
}}

Styling

Relative positioning with custom opacity:

className="relative rounded-lg bg-background p-4 overflow opacity-15 top-4 shadow-sm"

Multilingual Support Background

Displays a network of languages with colorful gradients.

Import

import MultilingualSupportBackground from '@/components/ui/multilingual-support-background'

Usage

export default function LanguageSection() {
  return (
    <div className="relative min-h-screen">
      <MultilingualSupportBackground />
      
      <div className="relative z-10 p-8">
        <h1>Global Collaboration</h1>
        <p>Support for multiple languages</p>
      </div>
    </div>
  )
}

Features

Language Cards
Colored Connections
Language Icons

Cards with gradient backgrounds:

<LanguageCard
  language="English"
  region="Global"
  x={15}
  y={20}
  color="#6bc5ff"
/>

Gradient styling:

style={{
  background: `linear-gradient(135deg, ${color}, #ffffff20)`,
}}

Lines with custom colors:

<ConnectionLine
  startX={15}
  startY={20}
  endX={50}
  endY={30}
  color="#ff6b6b"
/>

Globe and language icons:

<GlobeIcon className="w-10 h-10 text-blue-400 opacity-5" />
<LanguagesIcon className="w-10 h-10 text-pink-400 opacity-5" />

Color Scheme

const colors = {
  english: '#6bc5ff',    // Blue
  spanish: '#ff9f43',    // Orange
  chinese: '#ff6b6b',    // Red
  arabic: '#48dbfb',     // Light blue
  french: '#ff9f43',     // Orange
}

Background gradient:

className="fixed inset-0 
          bg-gradient-to-r from-blue-50 via-purple-50 to-pink-50 
          overflow-hidden opacity-10"

Displays a network of shared files.

Import

import FileSharingBackground from '@/components/ui/file-sharing-background'

Usage

export default function FileSharingSection() {
  return (
    <div className="relative min-h-screen">
      <FileSharingBackground />
      
      <div className="relative z-10 p-8">
        <h1>File Sharing</h1>
        <p>Share documents with your team</p>
      </div>
    </div>
  )
}

Features

File Cards
Connection Network
File Icons

Cards representing shared files:

<FileCard
  name="Project Report"
  fileType="PDF"
  x={20}
  y={30}
/>

Lines showing file relationships:

<ConnectionLine startX={20} startY={30} endX={50} endY={30} />

Decorative icons:

<ShareIcon className="w-10 h-10 opacity-5" />
<FileIcon className="w-10 h-10 opacity-5" />
<UserIcon className="w-10 h-10 opacity-5" />

Common Patterns

Card Component Structure

All backgrounds share a similar card structure:

const Card = ({ title, content, x, y }: CardProps) => {
  const [isHovered, setIsHovered] = useState(false)

  return (
    <Card
      className="absolute w-48 transition-all duration-300 ease-in-out hover:shadow-lg"
      style={{
        left: `${x}%`,
        top: `${y}%`,
        transform: `translate(-50%, -50%) ${isHovered ? 'scale(1.05)' : 'scale(1)'}`,
      }}
      onMouseEnter={() => setIsHovered(true)}
      onMouseLeave={() => setIsHovered(false)}
    >
      <CardContent className="p-4">
        <h3 className="text-lg font-semibold mb-2">{title}</h3>
        <p className="text-sm text-muted-foreground">{content}</p>
      </CardContent>
    </Card>
  )
}

Connection Lines

SVG lines connecting elements:

const ConnectionLine = ({ startX, startY, endX, endY, color = 'currentColor' }: LineProps) => (
  <svg className="absolute top-0 left-0 w-full h-full" style={{ zIndex: -1 }}>
    <line
      x1={`${startX}%`}
      y1={`${startY}%`}
      x2={`${endX}%`}
      y2={`${endY}%`}
      stroke={color}
      strokeWidth="1"
      className="text-muted-foreground/30"
    />
  </svg>
)

Styling Tips

Positioning

Use percentage-based positioning for responsive layouts:

left: `${x}%`,   // 0-100
top: `${y}%`,    // 0-100
transform: 'translate(-50%, -50%)'  // Center on point

Opacity

Keep backgrounds subtle with low opacity:

className="opacity-10"  // Very subtle
className="opacity-15"  // Slightly more visible

Z-index

Ensure content appears above background:

// Background
<BackgroundComponent /> // z-index: auto or negative

// Content
<div className="relative z-10">Content</div>

Transitions

Smooth hover effects:

className="transition-all duration-300 ease-in-out hover:shadow-lg"

Performance Considerations

Use fixed positioning sparingly (can affect scrolling performance)
Keep SVG elements simple
Limit number of animated elements
Use CSS transforms instead of position changes for animations
Consider using will-change for frequently animated properties

Creating Custom Backgrounds

Template for a new background component:

'use client'

import { useState } from 'react'
import { MyIcon } from 'lucide-react'
import { Card, CardContent } from '@/components/ui/card'

const MyCard = ({ title, description, x, y }: any) => {
  const [isHovered, setIsHovered] = useState(false)

  return (
    <Card
      className="absolute w-48 transition-all duration-300 ease-in-out hover:shadow-lg"
      style={{
        left: `${x}%`,
        top: `${y}%`,
        transform: `translate(-50%, -50%) ${isHovered ? 'scale(1.05)' : 'scale(1)'}`,
      }}
      onMouseEnter={() => setIsHovered(true)}
      onMouseLeave={() => setIsHovered(false)}
    >
      <CardContent className="p-4">
        <h3 className="text-lg font-semibold mb-2">{title}</h3>
        <p className="text-sm text-muted-foreground">{description}</p>
      </CardContent>
    </Card>
  )
}

const ConnectionLine = ({ startX, startY, endX, endY }: any) => (
  <svg className="absolute top-0 left-0 w-full h-full" style={{ zIndex: -1 }}>
    <line
      x1={`${startX}%`}
      y1={`${startY}%`}
      x2={`${endX}%`}
      y2={`${endY}%`}
      stroke="currentColor"
      strokeWidth="1"
      className="text-muted-foreground/30"
    />
  </svg>
)

export default function MyCustomBackground() {
  return (
    <div className="fixed inset-0 bg-background overflow-hidden opacity-10">
      <div className="relative w-full h-full">
        {/* Cards */}
        <MyCard title="Card 1" description="Description" x={20} y={30} />
        <MyCard title="Card 2" description="Description" x={50} y={40} />
        
        {/* Connections */}
        <ConnectionLine startX={20} startY={30} endX={50} endY={40} />
        
        {/* Icons */}
        <div className="absolute top-1/4 right-1/4 opacity-5">
          <MyIcon className="w-10 h-10" />
        </div>
      </div>
    </div>
  )
}

Editor

UI Components

Animated Backgrounds

Overview

Version History Background

Import

Usage

Features

Customization

Styling

Upvote Comments Background

Import

Usage

Features

Styling

Multilingual Support Background

Import

Usage

Features

Color Scheme

Import

Usage

Features

Common Patterns

Card Component Structure

Connection Lines

Styling Tips

Performance Considerations

Creating Custom Backgrounds

Next Steps

Buttons

Editor

Build docs developers (and LLMs) love

Editor

UI Components

​Overview

​Version History Background

​Import

​Usage

​Features

​Customization

​Styling

​Upvote Comments Background

​Import

​Usage

​Features

​Styling

​Multilingual Support Background

​Import

​Usage

​Features

​Color Scheme

​File Sharing Background

​Import

​Usage

​Features

​Common Patterns

​Card Component Structure

​Connection Lines

​Styling Tips

​Performance Considerations

​Creating Custom Backgrounds

​Next Steps

Buttons

Editor

Build docs developers (and LLMs) love

Overview

Version History Background

Import

Usage

Features

Customization

Styling

Upvote Comments Background

Import

Usage

Features

Styling

Multilingual Support Background

Import

Usage

Features

Color Scheme

File Sharing Background

Import

Usage

Features

Common Patterns

Card Component Structure

Connection Lines

Styling Tips

Performance Considerations

Creating Custom Backgrounds

Next Steps