feat: Add 'once' prop to PixelTransition component

src/constants/code/Animations/pixelTransitionCode.js

@@ -31,6 +31,7 @@ export const pixelTransition = {
   }
   gridSize={12}
   pixelColor='#ffffff'
+  once={false}
   animationStepDuration={0.4}
   className="custom-pixel-card"
 />`,

src/content/Animations/PixelTransition/PixelTransition.jsx

@@ -8,6 +8,7 @@ function PixelTransition({
   gridSize = 7,
   pixelColor = 'currentColor',
   animationStepDuration = 0.3,
+  once = false,
   aspectRatio = '100%',
   className = '',
   style = {}
@@ -93,10 +94,11 @@ function PixelTransition({
     if (!isActive) animatePixels(true);
   };
   const handleLeave = () => {
-    if (isActive) animatePixels(false);
+    if (isActive && !once) animatePixels(false);
   };
   const handleClick = () => {
-    animatePixels(!isActive);
+    if (!isActive) animatePixels(true);
+    else if (isActive && !once) animatePixels(false);
   };
 
   return (

src/demo/Animations/PixelTransitionDemo.jsx

@@ -13,6 +13,7 @@ import useForceRerender from '../../hooks/useForceRerender';
 
 import PixelTransition from '../../content/Animations/PixelTransition/PixelTransition';
 import { pixelTransition } from '../../constants/code/Animations/pixelTransitionCode';
+import PreviewSwitch from '@/components/common/Preview/PreviewSwitch';
 
 const propData = [
   {
@@ -51,6 +52,12 @@ const propData = [
     default: `"100%"`,
     description: "Sets the 'padding-top' (or aspect-ratio) for the container."
   },
+  {
+    name: 'once',
+    type: 'boolean',
+    default: 'false',
+    description: 'If true, the transition will not revert on mouse leave or subsequent clicks.'
+  },
   {
     name: 'className',
     type: 'string',
@@ -70,6 +77,7 @@ const PixelTransitionDemo = () => {
   const [pixelColor, setPixelColor] = useState('#ffffff');
   const [animationStepDuration, setAnimationStepDuration] = useState(0.4);
   const [key, forceRerender] = useForceRerender();
+  const [once, setOnce] = useState(false);
 
   return (
     <TabsLayout>
@@ -100,6 +108,7 @@ const PixelTransitionDemo = () => {
             gridSize={gridSize}
             pixelColor={pixelColor}
             animationStepDuration={animationStepDuration}
+            once={once}
             className="custom-pixel-card"
           />
           <Text mt={2} color="#a6a6a6">
@@ -148,6 +157,7 @@ const PixelTransitionDemo = () => {
               p={0}
             />
           </Flex>
+          <PreviewSwitch title="Once" isChecked={once} onChange={checked => setOnce(checked)} />
         </Customize>
 
         <PropTable data={propData} />

src/tailwind/Animations/PixelTransition/PixelTransition.jsx

@@ -9,6 +9,9 @@ function PixelTransition({
   animationStepDuration = 0.3,
   aspectRatio = '100%',
   className = '',
+  once = false,
+  style = {},
+  aspectRatio = '100%'
   style = {}
 }) {
   const containerRef = useRef(null);
@@ -94,10 +97,11 @@ function PixelTransition({
     if (!isActive) animatePixels(true);
   };
   const handleLeave = () => {
-    if (isActive) animatePixels(false);
+    if (isActive && !once) animatePixels(false);
   };
   const handleClick = () => {
-    animatePixels(!isActive);
+    if (!isActive) animatePixels(true);
+    else if (isActive && !once) animatePixels(false);
   };
 
   return (

src/ts-default/Animations/PixelTransition/PixelTransition.tsx

@@ -8,6 +8,7 @@ interface PixelTransitionProps {
   gridSize?: number;
   pixelColor?: string;
   animationStepDuration?: number;
+  once?: boolean;
   className?: string;
   style?: CSSProperties;
   aspectRatio?: string;
@@ -19,6 +20,7 @@ const PixelTransition: React.FC<PixelTransitionProps> = ({
   gridSize = 7,
   pixelColor = 'currentColor',
   animationStepDuration = 0.3,
+  once = false,
   aspectRatio = '100%',
   className = '',
   style = {}
@@ -104,12 +106,12 @@ const PixelTransition: React.FC<PixelTransitionProps> = ({
     if (!isActive) animatePixels(true);
   };
   const handleLeave = (): void => {
-    if (isActive) animatePixels(false);
+    if (isActive && !once) animatePixels(false);
   };
   const handleClick = (): void => {
-    animatePixels(!isActive);
+    if (!isActive) animatePixels(true);
+    else if (isActive && !once) animatePixels(false);
   };
-
   return (
     <div
       ref={containerRef}

src/ts-tailwind/Animations/PixelTransition/PixelTransition.tsx

@@ -7,6 +7,7 @@ interface PixelTransitionProps {
   gridSize?: number;
   pixelColor?: string;
   animationStepDuration?: number;
+  once?: boolean;
   className?: string;
   style?: CSSProperties;
   aspectRatio?: string;
@@ -18,6 +19,7 @@ const PixelTransition: React.FC<PixelTransitionProps> = ({
   gridSize = 7,
   pixelColor = 'currentColor',
   animationStepDuration = 0.3,
+  once = false,
   aspectRatio = '100%',
   className = '',
   style = {}
@@ -105,12 +107,12 @@ const PixelTransition: React.FC<PixelTransitionProps> = ({
     if (!isActive) animatePixels(true);
   };
   const handleLeave = (): void => {
-    if (isActive) animatePixels(false);
+    if (isActive && !once) animatePixels(false);
   };
   const handleClick = (): void => {
-    animatePixels(!isActive);
+    if (!isActive) animatePixels(true);
+    else if (isActive && !once) animatePixels(false);
   };
-
   return (
     <div
       ref={containerRef}