Updated @jdion/tilt-react demo

jonathandion · Oct 15, 2023 · 28e6e2c · 28e6e2c
1 parent 26fb3c5
commit 28e6e2c
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 6 deletions.
diff --git a/examples/tilt/src/app.tsx b/examples/tilt/src/app.tsx
@@ -4,7 +4,19 @@ import './app.css'
 export const App = () => {
   return (
     <div className="container mx-auto p-20 flex items-center justify-center">
-      <Tilt className="h-[250px] w-[250px] drop-shadow-2xl text-6xl flex items-center justify-center max-w-sm p-6 bg-gradient-to-r from-indigo-500 via-purple-500 to-pink-500 shadow">👽</Tilt>
+      <Tilt
+        className="flex h-[200px] w-[200px] content-center items-center justify-center rounded-xl bg-gradient-to-r from-violet-500 to-fuchsia-500"
+        style={{
+          boxShadow: '0 48px 60px 0 rgba(2,14,26,.24)',
+          transformStyle: 'preserve-3d',
+        }} 
+      >
+        <div style={{
+          transform: 'translateZ(60px)',
+        }}>
+          <span className="text-6xl" role="img" aria-label="alien">👽</span>
+        </div>
+      </Tilt>
     </div>
   )
 }

diff --git a/packages/tilt-react/README.md b/packages/tilt-react/README.md
@@ -20,11 +20,7 @@ A tiny requestAnimationFrame powered 60+fps lightweight parallax hover tilt effe
 ## Install
 
 ```bash
-pnpm add react-tilt react react-dom
-# or
-npm install react-tilt react react-dom
-# or
-yarn add react-tilt react react-dom
+npm install @jdion/tilt-react react react-dom
 ```
 
 ## Usage