pixlated

Lightweight web components that add noise textures to images and backgrounds using Canvas API.

Effect Preview

See the subtle noise effect pixlated adds to an image.

Before (Original)	After (With `<pixlated-image>`)

Features

Two web components: <pixlated-image> and <pixlated-bg>
Zero dependencies
Built with native Web Components API
High-performance Canvas rendering
Responsive and accessible

Installation

NPM

npm install pixlated

CDN

Load both components

<script type="module" src="https://unpkg.com/pixlated/src/pixlated.js"></script>
<script type="module" src="https://unpkg.com/pixlated/src/pixlated-bg.js"></script>

Or load individually:

<!-- Just image component -->
<script type="module" src="https://unpkg.com/pixlated/src/pixlated.js"></script>

<!-- Just background component -->
<script type="module" src="https://unpkg.com/pixlated/src/pixlated-bg.js"></script>

Usage

With Bundlers (Vite, Webpack, etc)

// Import the image component
import 'pixlated';

// Import the background component
import 'pixlated/bg';

Image Grain Effect

Add noise texture to images:

<pixlated-image
  src="photo.jpg"
  intensity="0.3"
  width="400"
  height="400"
  alt="Photo with grain effect"
/>

Attributes:

Attribute	Default	Description
`src`	required	Image URL
`intensity`	0.1	Noise intensity from 0 to 1
`animated`	false	If present, the grain will animate to simulate real film grain
`width`	400	Canvas width in pixels
`height`	400	Canvas height in pixels
`alt`	optional	Alternative text for accessibility

Background Noise Effect

Add noise texture to backgrounds:

<pixlated-bg intensity="0.15" color="#09090b">
  <h1>Your content here</h1>
  <p>Perfect for hero sections, cards, and more</p>
</pixlated-bg>

Attributes:

Attribute	Default	Description
`intensity`	0.1	Noise intensity from 0 to 1
`color`	#09090b	Background color
`animated`	false	If present, the grain will animate to simulate real film grain
`width`	auto-sizes	Fixed width in pixels
`height`	auto-sizes	Fixed height in pixels

Styling

Style components with CSS:

pixlated-image {
  border-radius: 12px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

pixlated-bg {
  padding: 2rem;
  border-radius: 8px;
}

Contributing

Contributions are welcome! Please read CONTRIBUTING.md for guidelines.

License

License under Apache-2.0

Give the repo a star if you haven't already