uicapsule

Background Pixel Stars

Backgrounds 359

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

    521
  • Geometric Orb

    Geometric Orb

    130
  • Background Shapes

    Background Shapes

    113
  • Formation

    Formation

    103
  • 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

    850
  • Background snippets

    Background snippets

    229
  • Light theme Tailwind CSS Background Snippet

    Light theme Tailwind CSS Background Snippet

    232
  • Tailwind CSS Background Snippet

    Tailwind CSS Background Snippet

    558
  • Gradient Backgrounds

    Gradient Backgrounds

    28
  • LivingOrigami bg

    LivingOrigami bg

    146
  • Background Components

    Background Components

    20
  • Gradient Blur Bg

    Gradient Blur Bg

    72