🎨 Add parallax hover effect to laracon ticket image

Author: HassanZahirnia

package-lock.json

@@ -15,6 +15,7 @@
         "@tailwindcss/postcss": "^4.1.8",
         "@tailwindcss/typography": "^0.5.16",
         "alpinejs": "^3.14.9",
+        "atropos": "^2.0.2",
         "axios": "^1.9.0",
         "gsap": "^3.13.0",
         "laravel-vite-plugin": "^0.7.8",

package.json

@@ -8,7 +8,9 @@ import {
 } from '../../vendor/livewire/livewire/dist/livewire.esm'
 import codeBlock from './alpine/codeBlock.js'
 import docsearch from '@docsearch/js'
+import Atropos from 'atropos'
 import '@docsearch/css'
+import 'atropos/css'
 
 import.meta.glob(['../images/**', '../svg/**'])
 import {
@@ -50,6 +52,9 @@ window.motion = {
     cubicBezier: cubicBezier,
 }
 
+// Atropos
+window.Atropos = Atropos
+
 // GSAP
 window.gsap = gsap
 

resources/images/laracon/laracon.webp

@@ -1,7 +1,10 @@
 <x-layout>
     {{-- Hero Section --}}
     <section class="mx-auto mt-12 max-w-5xl px-5">
-        <div class="grid place-items-center text-center">
+        <div
+            x-ref="ticketEvent"
+            class="grid place-items-center text-center"
+        >
             {{-- Countdown Header --}}
             <h2
                 x-init="
@@ -114,21 +117,46 @@ class="text-base text-slate-600 uppercase dark:text-white/60"
                         })
                     }
                 "
-                class="relative isolate mt-8"
+                class="relative isolate p-10"
             >
-                <img
-                    src="{{ Vite::asset('resources/images/laraconus2025ticket.webp') }}"
-                    alt="Laracon US 2025 Ticket"
-                    class="max-w-130"
-                />
+                <div
+                    x-init="
+                        () => {
+                            Atropos({
+                                el: $el,
+                                activeOffset: 10,
+                                shadow: false,
+                                highlight: false,
+                                eventsEl: $refs.ticketEvent,
+                            })
+                        }
+                    "
+                    class="atropos"
+                >
+                    <div class="atropos-scale">
+                        <div class="atropos-rotate">
+                            <div class="atropos-inner">
+                                <img
+                                    src="{{ Vite::asset('resources/images/laracon/laraconus2025ticket.webp') }}"
+                                    alt="Laracon US 2025 Ticket"
+                                    class="max-w-130"
+                                />
+                                <img
+                                    data-atropos-offset="8"
+                                    src="{{ Vite::asset('resources/images/laracon/laracon.webp') }}"
+                                    alt="Laracon"
+                                    class="absolute right-34 bottom-6 w-58"
+                                />
+                            </div>
+                        </div>
+                    </div>
+                </div>
                 <div
                     class="absolute top-1/2 right-1/2 -z-10 hidden h-full w-full translate-x-1/2 -translate-y-1/2 rounded-full bg-slate-500/25 blur-3xl dark:block"
                 ></div>
             </div>
 
-            <header
-                class="relative z-10 mt-10 grid place-items-center text-center"
-            >
+            <header class="relative z-10 grid place-items-center text-center">
                 {{-- Primary Heading --}}
                 <h1
                     id="hero-heading"