ciphera-net/pulse
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 15 Wiki Activity

feat: enhance dashboard preview with scroll-based animations using framer-motion, improving interactivity and visual dynamics

Browse Source
This commit is contained in:
Usman Baig
2026-01-30 15:29:53 +01:00
parent 7c40003b8e
commit cd590553b6
1 changed files with 22 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
app/page.tsx
View File

@@ -1,8 +1,8 @@
'use client' 'use client'
import { useEffect, useState } from 'react' import { useEffect, useState, useRef } from 'react'
import Link from 'next/link' import Link from 'next/link'
import { motion } from 'framer-motion' import { motion, useScroll, useTransform } from 'framer-motion'
import { useAuth } from '@/lib/auth/context' import { useAuth } from '@/lib/auth/context'
import { initiateOAuthFlow, initiateSignupFlow } from '@/lib/api/oauth' import { initiateOAuthFlow, initiateSignupFlow } from '@/lib/api/oauth'
import { listSites, deleteSite, type Site } from '@/lib/api/sites' import { listSites, deleteSite, type Site } from '@/lib/api/sites'
@@ -13,19 +13,32 @@ import { BarChartIcon, LockIcon, ZapIcon, CheckCircleIcon, XIcon } from '@cipher
import { toast } from '@ciphera-net/ui' import { toast } from '@ciphera-net/ui'
function DashboardPreview() { function DashboardPreview() {
const containerRef = useRef<HTMLDivElement>(null)
const { scrollYProgress } = useScroll({
target: containerRef,
offset: ["start end", "end end"]
})
const rotateX = useTransform(scrollYProgress, [0, 1], [30, 0])
const scale = useTransform(scrollYProgress, [0, 1], [0.8, 1])
const opacity = useTransform(scrollYProgress, [0, 0.8], [0.5, 1])
return ( return (
<div className="relative w-full max-w-5xl mx-auto mt-20 mb-32"> <div ref={containerRef} className="relative w-full max-w-5xl mx-auto mt-20 mb-32 h-[600px] flex items-center justify-center">
{/* * Glow behind the image */} {/* * Glow behind the image */}
<div className="absolute inset-0 bg-brand-orange/20 blur-[100px] -z-10 rounded-full opacity-50" /> <div className="absolute inset-0 bg-brand-orange/20 blur-[100px] -z-10 rounded-full opacity-50" />
{/* * Animated Container */} {/* * Animated Container */}
<motion.div <motion.div
initial={{ opacity: 0, rotateX: 20, scale: 0.9, y: 50 }} style={{
whileInView={{ opacity: 1, rotateX: 0, scale: 1, y: 0 }} rotateX,
viewport={{ once: true, margin: "-100px" }} scale,
transition={{ duration: 0.8, ease: "easeOut" }} opacity,
style={{ perspective: '1000px' }} perspective: '1000px',
className="relative rounded-xl border border-neutral-200/50 dark:border-neutral-800/50 bg-neutral-900/50 backdrop-blur-sm shadow-2xl overflow-hidden" transformStyle: 'preserve-3d'
}}
className="relative w-full rounded-xl border border-neutral-200/50 dark:border-neutral-800/50 bg-neutral-900/50 backdrop-blur-sm shadow-2xl overflow-hidden"
> >
{/* * Header of the fake browser window */} {/* * Header of the fake browser window */}
<div className="h-8 bg-neutral-800/50 border-b border-white/5 flex items-center px-4 gap-2"> <div className="h-8 bg-neutral-800/50 border-b border-white/5 flex items-center px-4 gap-2">