uicapsule

Background Pixel Stars

Backgrounds 370

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

    536
  • Geometric Orb

    Geometric Orb

    132
  • Background Shapes

    Background Shapes

    113
  • Formation

    Formation

    110
  • Voice Dictator

    Voice Dictator

    91
  • Infinite Grid

    Infinite Grid

    36
  • ASCII Renderer

    ASCII Renderer

    16
  • Spinner Pixel Grid

    Spinner Pixel Grid

    12

More in Backgrounds

View all
  • Background snippets

    Background snippets

    233
  • Elegant Dark Pattern

    Elegant Dark Pattern

    868
  • Tailwind CSS Background Snippet

    Tailwind CSS Background Snippet

    570
  • Light theme Tailwind CSS Background Snippet

    Light theme Tailwind CSS Background Snippet

    237
  • Gradient Backgrounds

    Gradient Backgrounds

    24
  • LivingOrigami bg

    LivingOrigami bg

    151
  • Gradient Blur Bg

    Gradient Blur Bg

    43
  • Background Components

    Background Components

    16