uicapsule

Background Pixel Stars

Backgrounds 342

About

An animated fullscreen canvas background of twinkling retro pixel stars with periodic pixelated shooting stars.

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

Code

How Background Pixel Stars is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"use client";

import { BackgroundPixelStars } from "@/components/ui/background-pixel-stars";

const Default = () => {
  return (
    <div className="h-dvh w-dvw bg-black bg-[url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAIAAACQkWg2AAAAIElEQVR42mIUEhJiwAbevXuHVZyJgUQwqmEUDB0AEGAADd8DEPTX6ksAAAAASUVORK5CYII=')] bg-[size:10px]">
      <BackgroundPixelStars />
    </div>
  );
};

export default Default;

More by uicapsule

View all
  • Gradient Orb

    Gradient Orb

    508
  • Geometric Orb

    Geometric Orb

    125
  • Background Shapes

    Background Shapes

    110
  • Formation

    Formation

    94
  • Voice Dictator

    Voice Dictator

    87
  • Infinite Grid

    Infinite Grid

    34
  • ASCII Renderer

    ASCII Renderer

    16
  • Spinner Pixel Grid

    Spinner Pixel Grid

    12

More in Backgrounds

View all
  • Elegant Dark Pattern

    Elegant Dark Pattern

    811
  • Gradient Backgrounds

    Gradient Backgrounds

    25
  • Jade Sky

    Jade Sky

    85
  • LivingOrigami bg

    LivingOrigami bg

    135
  • Tailwind CSS Background Snippet

    Tailwind CSS Background Snippet

    536
  • Background snippets

    Background snippets

    14
  • Light theme Tailwind CSS Background Snippet

    Light theme Tailwind CSS Background Snippet

    221
  • Gradient Blur Bg

    Gradient Blur Bg

    18