react-native-glitter 0.1.0

package/LICENSE

@@ -0,0 +1,20 @@
+MIT License
+
+Copyright (c) 2025 liveforownhappiness
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,256 @@
+# react-native-glitter
+
+✨ A beautiful shimmer/glitter effect component for React Native. Add a sparkling diagonal shine animation to any component!
+
+Works with both **React Native CLI** and **Expo** projects - no native dependencies required!
+
+![npm](https://img.shields.io/npm/v/react-native-glitter)
+![license](https://img.shields.io/npm/l/react-native-glitter)
+
+## Demo
+
+<p align="center">
+  <img src="./assets/demo.gif" alt="React Native Glitter Demo" width="320" />
+</p>
+
+## Features
+
+- 🚀 **Zero native dependencies** - Pure JavaScript/TypeScript implementation
+- 📱 **Cross-platform** - Works on iOS, Android, and Web
+- 🎨 **Customizable** - Control color, speed, angle, and more
+- ⚡ **Performant** - Uses native driver for smooth 60fps animations
+- 🔧 **TypeScript** - Full TypeScript support with type definitions
+- ✨ **Animation Modes** - Normal, expand, and shrink effects
+
+## Installation
+
+```bash
+# Using npm
+npm install react-native-glitter
+
+# Using yarn
+yarn add react-native-glitter
+```
+
+## Usage
+
+### Basic Usage
+
+Wrap any component with `<Glitter>` to add a shimmer effect:
+
+```tsx
+import { Glitter } from 'react-native-glitter';
+
+function MyComponent() {
+  return (
+    <Glitter>
+      <View style={styles.card}>
+        <Text>This content will shimmer!</Text>
+      </View>
+    </Glitter>
+  );
+}
+```
+
+### Animation Modes
+
+Control how the shimmer line behaves during animation:
+
+```tsx
+// Normal - constant size (default)
+<Glitter mode="normal">
+  <View style={styles.box} />
+</Glitter>
+
+// Expand - starts small and grows
+<Glitter mode="expand">
+  <View style={styles.box} />
+</Glitter>
+
+// Shrink - starts full size and shrinks
+<Glitter mode="shrink">
+  <View style={styles.box} />
+</Glitter>
+```
+
+### Shrink/Expand Positions
+
+For `shrink` and `expand` modes, control where the line shrinks to or expands from:
+
+```tsx
+// Shrink to top
+<Glitter mode="shrink" position="top">
+  <View style={styles.box} />
+</Glitter>
+
+// Shrink to center (default)
+<Glitter mode="shrink" position="center">
+  <View style={styles.box} />
+</Glitter>
+
+// Shrink to bottom
+<Glitter mode="shrink" position="bottom">
+  <View style={styles.box} />
+</Glitter>
+```
+
+### Skeleton Loading
+
+Create beautiful skeleton loading states:
+
+```tsx
+import { Glitter } from 'react-native-glitter';
+
+function SkeletonLoader() {
+  return (
+    <Glitter duration={1200} delay={300}>
+      <View style={styles.skeletonBox} />
+    </Glitter>
+  );
+}
+```
+
+### Premium Button
+
+Add a luxurious shimmer to buttons:
+
+```tsx
+import { Glitter } from 'react-native-glitter';
+
+function PremiumButton() {
+  return (
+    <Glitter color="rgba(255, 215, 0, 0.5)" angle={25}>
+      <TouchableOpacity style={styles.button}>
+        <Text>✨ Premium Feature</Text>
+      </TouchableOpacity>
+    </Glitter>
+  );
+}
+```
+
+### Controlled Animation
+
+Control when the animation runs:
+
+```tsx
+import { Glitter } from 'react-native-glitter';
+
+function ControlledGlitter() {
+  const [isLoading, setIsLoading] = useState(true);
+
+  return (
+    <Glitter active={isLoading}>
+      <View style={styles.content}>
+        <Text>Loading...</Text>
+      </View>
+    </Glitter>
+  );
+}
+```
+
+## Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `children` | `ReactNode` | **required** | The content to apply the shimmer effect to |
+| `duration` | `number` | `1500` | Duration of one shimmer animation cycle in milliseconds |
+| `delay` | `number` | `400` | Delay between animation cycles in milliseconds |
+| `color` | `string` | `'rgba(255, 255, 255, 0.8)'` | Color of the shimmer effect |
+| `angle` | `number` | `20` | Angle of the shimmer in degrees |
+| `shimmerWidth` | `number` | `60` | Width of the shimmer band in pixels |
+| `active` | `boolean` | `true` | Whether the animation is active |
+| `style` | `ViewStyle` | - | Additional styles for the container |
+| `easing` | `(value: number) => number` | - | Custom easing function for the animation |
+| `mode` | `'normal' \| 'expand' \| 'shrink'` | `'normal'` | Animation mode for the shimmer line |
+| `position` | `'top' \| 'center' \| 'bottom'` | `'center'` | Position where the line shrinks/expands (for shrink/expand modes) |
+
+## Examples
+
+### Different Speeds
+
+```tsx
+// Fast shimmer
+<Glitter duration={800} delay={200}>
+  <View style={styles.box} />
+</Glitter>
+
+// Slow shimmer
+<Glitter duration={3000} delay={1000}>
+  <View style={styles.box} />
+</Glitter>
+```
+
+### Different Colors
+
+```tsx
+// Gold shimmer
+<Glitter color="rgba(255, 215, 0, 0.5)">
+  <View style={styles.box} />
+</Glitter>
+
+// Blue shimmer
+<Glitter color="rgba(100, 149, 237, 0.5)">
+  <View style={styles.box} />
+</Glitter>
+```
+
+### Different Angles
+
+```tsx
+// Horizontal shimmer
+<Glitter angle={0}>
+  <View style={styles.box} />
+</Glitter>
+
+// Diagonal shimmer
+<Glitter angle={45}>
+  <View style={styles.box} />
+</Glitter>
+```
+
+### Animation Modes
+
+```tsx
+// Expand mode - line grows as it moves
+<Glitter mode="expand">
+  <View style={styles.box} />
+</Glitter>
+
+// Shrink mode with position - line shrinks to bottom
+<Glitter mode="shrink" position="bottom">
+  <View style={styles.box} />
+</Glitter>
+```
+
+## TypeScript
+
+This library is written in TypeScript and includes type definitions:
+
+```tsx
+import {
+  Glitter,
+  type GlitterProps,
+  type GlitterMode,
+  type GlitterPosition,
+} from 'react-native-glitter';
+
+const customProps: GlitterProps = {
+  children: <View />,
+  duration: 2000,
+  color: 'rgba(255, 255, 255, 0.3)',
+  mode: 'shrink',
+  position: 'center',
+};
+```
+
+## Contributing
+
+See the [contributing guide](CONTRIBUTING.md) to learn how to contribute to the repository and the development workflow.
+
+## License
+
+MIT
+
+---
+
+Made with ❤️ by [liveforownhappiness](https://github.com/liveforownhappiness)

package/lib/module/index.js

@@ -0,0 +1,194 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState, useCallback, } from 'react';
+import { View, Animated, StyleSheet, Easing, } from 'react-native';
+function generateGlitterOpacities(count, peak = 1) {
+    const opacities = [];
+    const center = (count - 1) / 2;
+    for (let i = 0; i < count; i++) {
+        const distance = Math.abs(i - center);
+        const normalizedDistance = distance / center;
+        let opacity;
+        if (normalizedDistance < 0.15) {
+            opacity = peak;
+        }
+        else if (normalizedDistance < 0.3) {
+            const t = (normalizedDistance - 0.15) / 0.15;
+            opacity = peak * (1 - t * 0.6);
+        }
+        else {
+            const t = (normalizedDistance - 0.3) / 0.7;
+            opacity = peak * 0.4 * Math.pow(1 - t, 2);
+        }
+        opacities.push(Math.max(0, opacity));
+    }
+    return opacities;
+}
+function generateVerticalSegments(fadeRatioParam) {
+    const fadeRatio = fadeRatioParam ?? 0.25;
+    const solidRatio = 1 - fadeRatio * 2;
+    const fadeSegments = 5;
+    const segments = [];
+    for (let i = 0; i < fadeSegments; i++) {
+        const opacity = (i + 1) / fadeSegments;
+        segments.push({
+            heightRatio: fadeRatio / fadeSegments,
+            opacity: Math.pow(opacity, 2),
+        });
+    }
+    segments.push({
+        heightRatio: solidRatio,
+        opacity: 1,
+    });
+    for (let i = fadeSegments - 1; i >= 0; i--) {
+        const opacity = (i + 1) / fadeSegments;
+        segments.push({
+            heightRatio: fadeRatio / fadeSegments,
+            opacity: Math.pow(opacity, 2),
+        });
+    }
+    return segments;
+}
+export function Glitter({ children, duration = 1500, delay = 400, color = 'rgba(255, 255, 255, 0.8)', angle = 20, shimmerWidth = 60, active = true, style, easing, mode = 'normal', position = 'center', }) {
+    const animatedValue = useRef(new Animated.Value(0)).current;
+    const [containerWidth, setContainerWidth] = useState(0);
+    const [containerHeight, setContainerHeight] = useState(0);
+    const animationRef = useRef(null);
+    const defaultEasing = Easing.bezier(0.4, 0, 0.2, 1);
+    const startAnimation = useCallback(() => {
+        if (!active || containerWidth === 0)
+            return;
+        animatedValue.setValue(0);
+        const timing = Animated.timing(animatedValue, {
+            toValue: 1,
+            duration,
+            useNativeDriver: true,
+            easing: easing ?? defaultEasing,
+        });
+        animationRef.current = Animated.loop(Animated.sequence([timing, Animated.delay(delay)]));
+        animationRef.current.start();
+        return () => {
+            animationRef.current?.stop();
+        };
+    }, [
+        active,
+        containerWidth,
+        duration,
+        delay,
+        animatedValue,
+        easing,
+        defaultEasing,
+    ]);
+    useEffect(() => {
+        const cleanup = startAnimation();
+        return cleanup;
+    }, [startAnimation]);
+    const onLayout = useCallback((event) => {
+        const { width, height } = event.nativeEvent.layout;
+        setContainerWidth(width);
+        setContainerHeight(height);
+    }, []);
+    const extraWidth = Math.tan((angle * Math.PI) / 180) * 200;
+    const translateX = animatedValue.interpolate({
+        inputRange: [0, 1],
+        outputRange: [-shimmerWidth - extraWidth, containerWidth + shimmerWidth],
+    });
+    const heightMultiplier = 1.5;
+    const lineHeight = containerHeight * heightMultiplier;
+    const getScaleY = () => {
+        if (mode === 'normal') {
+            return 1;
+        }
+        if (mode === 'expand') {
+            return animatedValue.interpolate({
+                inputRange: [0, 1],
+                outputRange: [0.01, 1],
+            });
+        }
+        return animatedValue.interpolate({
+            inputRange: [0, 1],
+            outputRange: [1, 0.01],
+        });
+    };
+    const halfHeight = lineHeight / 2;
+    const startOffset = 0;
+    const getTransformOriginOffset = () => {
+        if (mode === 'normal' || position === 'center') {
+            return 0;
+        }
+        if (position === 'top') {
+            return -halfHeight;
+        }
+        else {
+            return halfHeight;
+        }
+    };
+    const layerCount = Math.max(11, Math.round(shimmerWidth / 3));
+    const horizontalOpacities = generateGlitterOpacities(layerCount, 1);
+    const layerWidth = shimmerWidth / layerCount;
+    const normalFadeRatio = (heightMultiplier - 1) / heightMultiplier / 2;
+    const normalSegments = generateVerticalSegments(normalFadeRatio);
+    const animatedSegments = generateVerticalSegments(0.25);
+    const shimmerLayers = horizontalOpacities.map((opacity, index) => ({
+        opacity,
+        position: index * layerWidth - shimmerWidth / 2 + layerWidth / 2,
+    }));
+    const scaleY = getScaleY();
+    const transformOriginOffset = getTransformOriginOffset();
+    const isAnimated = mode !== 'normal';
+    return (_jsxs(View, { style: [styles.container, style], onLayout: onLayout, children: [children, active && containerWidth > 0 && containerHeight > 0 && (_jsx(Animated.View, { style: [
+                    styles.shimmerContainer,
+                    {
+                        transform: [{ translateX }],
+                    },
+                ], pointerEvents: "none", children: _jsx(View, { style: [
+                        styles.rotationWrapper,
+                        {
+                            width: shimmerWidth,
+                            height: lineHeight,
+                            transform: [{ skewX: `${-angle}deg` }],
+                        },
+                    ], children: shimmerLayers.map((layer, layerIndex) => (_jsx(Animated.View, { style: [
+                            styles.shimmerLine,
+                            {
+                                width: layerWidth + 0.5,
+                                height: lineHeight,
+                                left: layer.position,
+                                transform: isAnimated
+                                    ? [
+                                        { translateY: startOffset + transformOriginOffset },
+                                        {
+                                            scaleY: scaleY,
+                                        },
+                                        { translateY: -transformOriginOffset },
+                                    ]
+                                    : [{ translateY: startOffset }],
+                            },
+                        ], children: (isAnimated ? animatedSegments : normalSegments).map((segment, vIndex) => (_jsx(View, { style: {
+                                width: '100%',
+                                height: lineHeight * segment.heightRatio,
+                                backgroundColor: color,
+                                opacity: layer.opacity * segment.opacity,
+                            } }, vIndex))) }, layerIndex))) }) }))] }));
+}
+const styles = StyleSheet.create({
+    container: {
+        position: 'relative',
+        overflow: 'hidden',
+    },
+    shimmerContainer: {
+        ...StyleSheet.absoluteFillObject,
+        flexDirection: 'row',
+        justifyContent: 'center',
+        alignItems: 'center',
+    },
+    rotationWrapper: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+    shimmerLine: {
+        position: 'absolute',
+        flexDirection: 'column',
+    },
+});
+export default Glitter;

package/lib/typescript/src/index.d.ts

@@ -0,0 +1,19 @@
+import { type ReactNode, type ReactElement } from 'react';
+import { type StyleProp, type ViewStyle } from 'react-native';
+export type GlitterMode = 'normal' | 'expand' | 'shrink';
+export type GlitterPosition = 'top' | 'center' | 'bottom';
+export interface GlitterProps {
+    children: ReactNode;
+    duration?: number;
+    delay?: number;
+    color?: string;
+    angle?: number;
+    shimmerWidth?: number;
+    active?: boolean;
+    style?: StyleProp<ViewStyle>;
+    easing?: (value: number) => number;
+    mode?: GlitterMode;
+    position?: GlitterPosition;
+}
+export declare function Glitter({ children, duration, delay, color, angle, shimmerWidth, active, style, easing, mode, position, }: GlitterProps): ReactElement;
+export default Glitter;

package/package.json

@@ -0,0 +1,173 @@
+{
+  "name": "react-native-glitter",
+  "version": "0.1.0",
+  "description": "A beautiful shimmer/glitter effect component for React Native. Add a sparkling diagonal shine animation to any component!",
+  "main": "./lib/module/index.js",
+  "types": "./lib/typescript/src/index.d.ts",
+  "exports": {
+    ".": {
+      "source": "./src/index.tsx",
+      "types": "./lib/typescript/src/index.d.ts",
+      "default": "./lib/module/index.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "src",
+    "lib",
+    "android",
+    "ios",
+    "cpp",
+    "*.podspec",
+    "react-native.config.js",
+    "!ios/build",
+    "!android/build",
+    "!android/gradle",
+    "!android/gradlew",
+    "!android/gradlew.bat",
+    "!android/local.properties",
+    "!**/__tests__",
+    "!**/__fixtures__",
+    "!**/__mocks__",
+    "!**/.*"
+  ],
+  "scripts": {
+    "example": "yarn workspace react-native-glitter-example",
+    "ios": "yarn workspace react-native-glitter-example ios",
+    "example:ios": "yarn workspace react-native-glitter-example ios",
+    "example:android": "yarn workspace react-native-glitter-example android",
+    "example:web": "yarn workspace react-native-glitter-example web",
+    "clean": "del-cli lib",
+    "prepare": "yarn clean && tsc -p tsconfig.build.json",
+    "typecheck": "tsc",
+    "lint": "eslint \"**/*.{js,ts,tsx}\"",
+    "test": "jest",
+    "release": "release-it --only-version"
+  },
+  "keywords": [
+    "react-native",
+    "ios",
+    "android",
+    "expo",
+    "glitter",
+    "shimmer",
+    "shine",
+    "skeleton",
+    "loading",
+    "animation",
+    "effect",
+    "sparkle"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/liveforownhappiness/react-native-glitter.git"
+  },
+  "author": "liveforownhappiness <liveforownhappiness@gmail.com> (https://github.com/liveforownhappiness)",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/liveforownhappiness/react-native-glitter/issues"
+  },
+  "homepage": "https://github.com/liveforownhappiness/react-native-glitter#readme",
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/"
+  },
+  "devDependencies": {
+    "@commitlint/config-conventional": "^19.8.1",
+    "@eslint/compat": "^1.3.2",
+    "@eslint/eslintrc": "^3.3.1",
+    "@eslint/js": "^9.35.0",
+    "@react-native/babel-preset": "0.83.0",
+    "@react-native/eslint-config": "0.83.0",
+    "@release-it/conventional-changelog": "^10.0.1",
+    "@types/jest": "^29.5.14",
+    "@types/react": "^19.1.12",
+    "commitlint": "^19.8.1",
+    "del-cli": "^6.0.0",
+    "eslint": "^9.35.0",
+    "eslint-config-prettier": "^10.1.8",
+    "eslint-plugin-prettier": "^5.5.4",
+    "jest": "^29.7.0",
+    "lefthook": "^2.0.3",
+    "prettier": "^2.8.8",
+    "react": "19.1.0",
+    "react-native": "0.81.5",
+    "react-native-builder-bob": "^0.40.17",
+    "release-it": "^19.0.4",
+    "typescript": "^5.9.2"
+  },
+  "peerDependencies": {
+    "react": "*",
+    "react-native": "*"
+  },
+  "workspaces": [
+    "example"
+  ],
+  "packageManager": "yarn@4.11.0",
+  "react-native-builder-bob": {
+    "source": "src",
+    "output": "lib",
+    "targets": [
+      [
+        "module",
+        {
+          "esm": true
+        }
+      ],
+      [
+        "typescript",
+        {
+          "project": "tsconfig.build.json"
+        }
+      ]
+    ]
+  },
+  "prettier": {
+    "quoteProps": "consistent",
+    "singleQuote": true,
+    "tabWidth": 2,
+    "trailingComma": "es5",
+    "useTabs": false
+  },
+  "jest": {
+    "preset": "react-native",
+    "modulePathIgnorePatterns": [
+      "<rootDir>/example/node_modules",
+      "<rootDir>/lib/"
+    ]
+  },
+  "commitlint": {
+    "extends": [
+      "@commitlint/config-conventional"
+    ]
+  },
+  "release-it": {
+    "git": {
+      "commitMessage": "chore: release ${version}",
+      "tagName": "v${version}"
+    },
+    "npm": {
+      "publish": true
+    },
+    "github": {
+      "release": true
+    },
+    "plugins": {
+      "@release-it/conventional-changelog": {
+        "preset": {
+          "name": "angular"
+        }
+      }
+    }
+  },
+  "create-react-native-library": {
+    "type": "library",
+    "languages": "js",
+    "tools": [
+      "eslint",
+      "jest",
+      "lefthook",
+      "release-it"
+    ],
+    "version": "0.56.0"
+  }
+}

package/src/index.tsx

@@ -0,0 +1,309 @@
+import {
+  useEffect,
+  useRef,
+  useState,
+  useCallback,
+  type ReactNode,
+  type ReactElement,
+} from 'react';
+import {
+  View,
+  Animated,
+  StyleSheet,
+  Easing,
+  type LayoutChangeEvent,
+  type StyleProp,
+  type ViewStyle,
+} from 'react-native';
+
+export type GlitterMode = 'normal' | 'expand' | 'shrink';
+
+export type GlitterPosition = 'top' | 'center' | 'bottom';
+
+export interface GlitterProps {
+  children: ReactNode;
+  duration?: number;
+  delay?: number;
+  color?: string;
+  angle?: number;
+  shimmerWidth?: number;
+  active?: boolean;
+  style?: StyleProp<ViewStyle>;
+  easing?: (value: number) => number;
+  mode?: GlitterMode;
+  position?: GlitterPosition;
+}
+
+function generateGlitterOpacities(count: number, peak: number = 1): number[] {
+  const opacities: number[] = [];
+  const center = (count - 1) / 2;
+
+  for (let i = 0; i < count; i++) {
+    const distance = Math.abs(i - center);
+    const normalizedDistance = distance / center;
+
+    let opacity: number;
+    if (normalizedDistance < 0.15) {
+      opacity = peak;
+    } else if (normalizedDistance < 0.3) {
+      const t = (normalizedDistance - 0.15) / 0.15;
+      opacity = peak * (1 - t * 0.6);
+    } else {
+      const t = (normalizedDistance - 0.3) / 0.7;
+      opacity = peak * 0.4 * Math.pow(1 - t, 2);
+    }
+
+    opacities.push(Math.max(0, opacity));
+  }
+
+  return opacities;
+}
+
+interface VerticalSegment {
+  heightRatio: number;
+  opacity: number;
+}
+
+function generateVerticalSegments(fadeRatioParam?: number): VerticalSegment[] {
+  const fadeRatio = fadeRatioParam ?? 0.25;
+  const solidRatio = 1 - fadeRatio * 2;
+  const fadeSegments = 5;
+
+  const segments: VerticalSegment[] = [];
+
+  for (let i = 0; i < fadeSegments; i++) {
+    const opacity = (i + 1) / fadeSegments;
+    segments.push({
+      heightRatio: fadeRatio / fadeSegments,
+      opacity: Math.pow(opacity, 2),
+    });
+  }
+
+  segments.push({
+    heightRatio: solidRatio,
+    opacity: 1,
+  });
+
+  for (let i = fadeSegments - 1; i >= 0; i--) {
+    const opacity = (i + 1) / fadeSegments;
+    segments.push({
+      heightRatio: fadeRatio / fadeSegments,
+      opacity: Math.pow(opacity, 2),
+    });
+  }
+
+  return segments;
+}
+
+export function Glitter({
+  children,
+  duration = 1500,
+  delay = 400,
+  color = 'rgba(255, 255, 255, 0.8)',
+  angle = 20,
+  shimmerWidth = 60,
+  active = true,
+  style,
+  easing,
+  mode = 'normal',
+  position = 'center',
+}: GlitterProps): ReactElement {
+  const animatedValue = useRef(new Animated.Value(0)).current;
+  const [containerWidth, setContainerWidth] = useState(0);
+  const [containerHeight, setContainerHeight] = useState(0);
+  const animationRef = useRef<ReturnType<typeof Animated.loop> | null>(null);
+
+  const defaultEasing = Easing.bezier(0.4, 0, 0.2, 1);
+
+  const startAnimation = useCallback(() => {
+    if (!active || containerWidth === 0) return;
+
+    animatedValue.setValue(0);
+
+    const timing = Animated.timing(animatedValue, {
+      toValue: 1,
+      duration,
+      useNativeDriver: true,
+      easing: easing ?? defaultEasing,
+    });
+
+    animationRef.current = Animated.loop(
+      Animated.sequence([timing, Animated.delay(delay)])
+    );
+
+    animationRef.current.start();
+
+    return () => {
+      animationRef.current?.stop();
+    };
+  }, [
+    active,
+    containerWidth,
+    duration,
+    delay,
+    animatedValue,
+    easing,
+    defaultEasing,
+  ]);
+
+  useEffect(() => {
+    const cleanup = startAnimation();
+    return cleanup;
+  }, [startAnimation]);
+
+  const onLayout = useCallback((event: LayoutChangeEvent) => {
+    const { width, height } = event.nativeEvent.layout;
+    setContainerWidth(width);
+    setContainerHeight(height);
+  }, []);
+
+  const extraWidth = Math.tan((angle * Math.PI) / 180) * 200;
+
+  const translateX = animatedValue.interpolate({
+    inputRange: [0, 1],
+    outputRange: [-shimmerWidth - extraWidth, containerWidth + shimmerWidth],
+  });
+
+  const heightMultiplier = 1.5;
+  const lineHeight = containerHeight * heightMultiplier;
+
+  const getScaleY = (): Animated.AnimatedInterpolation<number> | number => {
+    if (mode === 'normal') {
+      return 1;
+    }
+
+    if (mode === 'expand') {
+      return animatedValue.interpolate({
+        inputRange: [0, 1],
+        outputRange: [0.01, 1],
+      });
+    }
+
+    return animatedValue.interpolate({
+      inputRange: [0, 1],
+      outputRange: [1, 0.01],
+    });
+  };
+
+  const halfHeight = lineHeight / 2;
+  const startOffset = 0;
+
+  const getTransformOriginOffset = (): number => {
+    if (mode === 'normal' || position === 'center') {
+      return 0;
+    }
+
+    if (position === 'top') {
+      return -halfHeight;
+    } else {
+      return halfHeight;
+    }
+  };
+
+  const layerCount = Math.max(11, Math.round(shimmerWidth / 3));
+  const horizontalOpacities = generateGlitterOpacities(layerCount, 1);
+  const layerWidth = shimmerWidth / layerCount;
+
+  const normalFadeRatio = (heightMultiplier - 1) / heightMultiplier / 2;
+  const normalSegments = generateVerticalSegments(normalFadeRatio);
+  const animatedSegments = generateVerticalSegments(0.25);
+
+  const shimmerLayers = horizontalOpacities.map((opacity, index) => ({
+    opacity,
+    position: index * layerWidth - shimmerWidth / 2 + layerWidth / 2,
+  }));
+
+  const scaleY = getScaleY();
+  const transformOriginOffset = getTransformOriginOffset();
+  const isAnimated = mode !== 'normal';
+
+  return (
+    <View style={[styles.container, style]} onLayout={onLayout}>
+      {children}
+      {active && containerWidth > 0 && containerHeight > 0 && (
+        <Animated.View
+          style={[
+            styles.shimmerContainer,
+            {
+              transform: [{ translateX }],
+            },
+          ]}
+          pointerEvents="none"
+        >
+          <View
+            style={[
+              styles.rotationWrapper,
+              {
+                width: shimmerWidth,
+                height: lineHeight,
+                transform: [{ skewX: `${-angle}deg` }],
+              },
+            ]}
+          >
+            {shimmerLayers.map((layer, layerIndex) => (
+              <Animated.View
+                key={layerIndex}
+                style={[
+                  styles.shimmerLine,
+                  {
+                    width: layerWidth + 0.5,
+                    height: lineHeight,
+                    left: layer.position,
+                    transform: isAnimated
+                      ? [
+                          { translateY: startOffset + transformOriginOffset },
+                          {
+                            scaleY:
+                              scaleY as Animated.AnimatedInterpolation<number>,
+                          },
+                          { translateY: -transformOriginOffset },
+                        ]
+                      : [{ translateY: startOffset }],
+                  },
+                ]}
+              >
+                {(isAnimated ? animatedSegments : normalSegments).map(
+                  (segment, vIndex) => (
+                    <View
+                      key={vIndex}
+                      style={{
+                        width: '100%',
+                        height: lineHeight * segment.heightRatio,
+                        backgroundColor: color,
+                        opacity: layer.opacity * segment.opacity,
+                      }}
+                    />
+                  )
+                )}
+              </Animated.View>
+            ))}
+          </View>
+        </Animated.View>
+      )}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    position: 'relative',
+    overflow: 'hidden',
+  },
+  shimmerContainer: {
+    ...StyleSheet.absoluteFillObject,
+    flexDirection: 'row',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  rotationWrapper: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  shimmerLine: {
+    position: 'absolute',
+    flexDirection: 'column',
+  },
+});
+
+export default Glitter;