feat(points): add effect engines and effects shop

src/pages/PointsPage.jsx

@@ -1,3 +1,4 @@
+import {useRef} from 'react';
 import {Link} from 'react-router-dom';
 import {useTranslation} from 'react-i18next';
 import {Coins} from 'lucide-react';
@@ -8,8 +9,10 @@ import {Button} from '@/components/ui/button';
 import {Card} from '@/components/ui/card';
 import {Skeleton} from '@/components/ui/skeleton';
 import {cn} from '@/lib/utils';
+import EffectBackground from '../components/EffectBackground.jsx';
 import PageContainer from '../components/PageContainer.jsx';
 import {usePreferences} from '../context/PreferencesContext.jsx';
+import useInView from '../hooks/useInView.js';
 import {formatDate} from '../utils/format.js';
 import {buyItem, equipItem, LOOKS, SLOTS} from '../utils/rewards.js';
 
@@ -143,9 +146,13 @@ export default function PointsPage() {
     );
 }
 
-// A sample of the look: a ring on a circle, a pill with the badge icon, a color dot or a framed box.
+// A sample of the look: a ring on a circle, a pill with the badge icon, a color dot, a framed box, a tile with its
+// effect or a box with the animated background.
 function Preview({code}) {
     const look = LOOKS[code];
+    const ref = useRef(null);
+    // The shop shows 20 animated previews at once; the ones off screen hold their frame.
+    const inView = useInView(ref, !!(look?.cover || look?.effect));
     if (!look) return null;
     if (look.Icon) {
         return <span className={cn('flex size-8 items-center justify-center rounded-full', look.className)}><look.Icon className="size-4"/></span>;
@@ -153,5 +160,15 @@ function Preview({code}) {
     if (look.accent) {
         return <span data-accent={look.accent} className="size-8 rounded-full bg-primary"/>;
     }
+    if (look.cover) {
+        return <span ref={ref} className={cn('relative h-8 w-14 shrink-0 overflow-hidden rounded-md bg-muted', look.cover, !inView && 'fx-paused')}/>;
+    }
+    if (look.effect) {
+        return (
+            <span ref={ref} className={cn('relative h-8 w-14 shrink-0 overflow-hidden rounded-md bg-background', !inView && 'fx-paused')}>
+                <EffectBackground effect={look.effect} className="absolute inset-0"/>
+            </span>
+        );
+    }
     return <span className={cn('size-8 shrink-0 bg-muted', look.className, code.startsWith('BORDER') ? 'rounded-full' : 'rounded-md')}/>;
 }