Flying Posters

Heroes 40

About

Beautiful animation of flying posters

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Flying Posters to your project and fits it to your theme.

Code

How Flying Posters is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import React, { useState, useEffect } from 'react';
import { FlyingPosters } from "@/components/ui/flying-posters";

const items = [
  'https://cdn.21st.dev/assets/mirror/04/048f2780cb89ba5d16f4db22a3a71e09932ae02f51b1c22f6987e51b8c2c2028.jpg',
  'https://cdn.21st.dev/assets/mirror/3d/3d7146484edf4e0f7687c9347d81037b095e5c50ccb6b10f25ab73aa9bc23521.jpg',
  'https://cdn.21st.dev/assets/mirror/a5/a53bdbfc25082eede421742d8dc0a2ff04dc5104ccc7ad1d1d1414719af68eb5.jpg',
  'https://cdn.21st.dev/assets/mirror/a7/a7f16da87bed9d6db289949db025748c018d9c923b662df5b7a504c47244c90c.jpg',
  'https://cdn.21st.dev/assets/mirror/5c/5c3f8ab1d59119648a6a00a68923141aa41da118e69a9fce69cc4509157b3754.jpg',
  'https://cdn.21st.dev/assets/mirror/49/49b1ae00607f78ce369d6e849d7c8007c564c1d8f2f65115908e27e3e0e28423.jpg',
];

const FlyingPostersDemo = () => {
  const [isDark, setIsDark] = useState(true);

  useEffect(() => {
    if (isDark) {
      document.documentElement.classList.add("dark");
    } else {
      document.documentElement.classList.remove("dark");
    }
  }, [isDark]);

  const toggleTheme = () => {
    setIsDark(!isDark);
  };

  return (
    <div className="relative flex w-full min-h-screen justify-center items-center bg-black dark:bg-white overflow-hidden">
      <div className="absolute top-4 right-4">
        <button
          onClick={toggleTheme}
          className="p-2 rounded-full border border-gray-700 dark:border-gray-300 bg-gray-900 dark:bg-gray-100 text-white dark:text-black"
        >

        </button>
      </div>
      
      <div className="absolute inset-0">
        <FlyingPosters items={items} />
      </div>
      
      <div className="relative z-10 text-[var(--text-color)] text-7xl font-bold select-none ">
        Scroll. 
      </div>

      <style jsx>{`
        .FlyingPostersDemo {
          --text-color: hsl(0 0% 70%);
        }
        html.dark .FlyingPostersDemo {
          --text-color: hsl(0 0% 70%);
        }
        html:not(.dark) .FlyingPostersDemo {
          --text-color: hsl(0 0% 30%);
        }
      `}</style>
    </div>
  );
};

export { FlyingPostersDemo };