PHPackages                             fikfikk/shimmer - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. [Image & Media](/categories/media)
4. /
5. fikfikk/shimmer

ActiveLibrary[Image & Media](/categories/media)

fikfikk/shimmer
===============

Laravel package for beautiful image shimmer loading effect

v1.0.0(5mo ago)04MITPHPPHP ^8.0|^8.1|^8.2|^8.3

Since Jan 16Pushed 5mo agoCompare

[ Source](https://github.com/FikFikk/shimmer)[ Packagist](https://packagist.org/packages/fikfikk/shimmer)[ RSS](/packages/fikfikk-shimmer/feed)WikiDiscussions main Synced today

READMEChangelogDependencies (3)Versions (2)Used By (0)

🌟 Fikfikk Shimmer
=================

[](#-fikfikk-shimmer)

Beautiful, lightweight image shimmer loading effect for any web project.

[![License](https://camo.githubusercontent.com/7013272bd27ece47364536a221edb554cd69683b68a46fc0ee96881174c4214c/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f6c6963656e73652d4d49542d626c75652e737667)](LICENSE.md)[![Laravel](https://camo.githubusercontent.com/22250bdb4ae8746d9da3b88bacb1d8a9cb5d22103282eab6bdd3078359a242d3/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f4c61726176656c2d392532302537432532303130253230253743253230313125323025374325323031322d7265642e737667)](https://laravel.com)[![PHP](https://camo.githubusercontent.com/64d1b45f6e477957ad87badfff7c23d9ae2d2fa21507433c24392ea5d7321cc5/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f5048502d382e302532422d707572706c652e737667)](https://php.net)

✨ Features
----------

[](#-features)

- 🚀 **Zero Dependencies** - Pure CSS & vanilla JS
- 🎨 **Customizable** - Colors, speed, border radius
- 🌙 **Dark Mode** - Automatic dark mode support
- ♿ **Accessible** - Respects `prefers-reduced-motion`
- 📦 **Universal** - Works with Laravel, Vue, React, Alpine.js, or plain HTML
- ⚡ **Lightweight** - < 2KB minified + gzipped

---

📦 Installation
--------------

[](#-installation)

### Laravel (Composer)

[](#laravel-composer)

```
composer require fikfikk/shimmer
```

### CDN (HTML/JS/Vue/React)

[](#cdn-htmljsvuereact)

```

```

### NPM (Coming Soon)

[](#npm-coming-soon)

```
npm install fikfikk-shimmer
```

---

🚀 Quick Start
-------------

[](#-quick-start)

### Laravel Blade

[](#laravel-blade)

```
{{-- Simple usage - auto size based on image --}}

{{-- With aspect ratio --}}

{{-- With fixed dimensions --}}

```

### Plain HTML

[](#plain-html)

```

```

### JavaScript API

[](#javascript-api)

```
// Create shimmer programmatically
FikfikkShimmer.create({
  container: "#my-container",
  src: "photo.jpg",
  alt: "My Photo",
  aspectRatio: "16/9",
  onLoad: (img) => console.log("Loaded!", img),
});

// Refresh after dynamic content
FikfikkShimmer.refresh();
```

### Vue 3

[](#vue-3)

```

import { ShimmerImage } from "fikfikk-shimmer/vue";

```

### React

[](#react)

```
import { ShimmerImage } from "fikfikk-shimmer/react";

function ProductCard({ product }) {
  return (
     console.log("Loaded!")}
    />
  );
}
```

### PHP Helper Function

[](#php-helper-function)

```