Floating Code

A lightweight animated component that displays floating code snippets with smooth vertical movement and opacity transitions. Perfect for creating dynamic coding-themed backgrounds or decorative elements.

Default Usage

import { FloatingCode } from "@/components/ui/FloatingCode";

export const DefaultFloatingCodeExample = () => {
  return (
    <div className="relative h-80 w-full bg-background overflow-hidden">
      <FloatingCode code="<QuickCode />" className="top-10 left-5" />
      <FloatingCode code="npm install" className="top-20 right-10" />
      <FloatingCode
        code="const [state, setState]"
        className="bottom-20 left-10"
      />

      <div className="absolute font-bold inset-0 flex items-center justify-center">
        <div className="text-center text-primary">
          <h3 className="text-2xl font-bold mb-2">Animated Code Snippets</h3>
          <p className="text-primary">
            Floating code elements with smooth animations
          </p>
        </div>
      </div>
    </div>
  );
};

Props

Features

• Smooth Animations: Continuous vertical floating motion with opacity changes
• Lightweight: Minimal component with no external dependencies
• Customizable Positioning: Use className prop for precise positioning
• Monospace Font: Authentic code appearance with font-mono
• Performance Optimized: Efficient animations using Framer Motion

Real-World Usage

This component is ideal for creating animated backgrounds in developer portfolios, landing pages for coding tools, or as decorative elements in technical documentation. Position multiple instances across a container to create an immersive coding atmosphere that enhances the visual appeal without distracting from main content.