uicapsule

Background Pixel Stars

Backgrounds 355

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

    515
  • Geometric Orb

    Geometric Orb

    129
  • Background Shapes

    Background Shapes

    111
  • Formation

    Formation

    102
  • Voice Dictator

    Voice Dictator

    89
  • Infinite Grid

    Infinite Grid

    35
  • ASCII Renderer

    ASCII Renderer

    16
  • Spinner Pixel Grid

    Spinner Pixel Grid

    12

More in Backgrounds

View all
  • Elegant Dark Pattern

    Elegant Dark Pattern

    846
  • Gradient Backgrounds

    Gradient Backgrounds

    26
  • Tailwind CSS Background Snippet

    Tailwind CSS Background Snippet

    552
  • Background snippets

    Background snippets

    18
  • LivingOrigami bg

    LivingOrigami bg

    144
  • Gradient Blur Bg

    Gradient Blur Bg

    28
  • Background Components

    Background Components

    45
  • Light theme Tailwind CSS Background Snippet

    Light theme Tailwind CSS Background Snippet

    229