Building a Workout Diary Using Framer Motion

• Data Fetching and Processing: Utilize server-side capabilities of Next.js to benefit from data caching, secure fetching, and efficient server-side computations.
• Graphical User Interface Rendering: Offload rendering computations to the client-side, optimizing for interactivity and dynamic updates without compromising initial page load.

• Data Fetching: Secure, cached data retrieval to enhance performance and reduce external API calls.
• Security and Caching: Leveraging Vercel's Serverless SQL with PostgreSQL for efficient data storage and retrieval, ensuring robustness against Strava API rate limits.

import dayjs from 'dayjs'
import axios from 'axios'
import Secret from '@/models/Secret' // Example model for database interaction

const getToken = async (code) => {
	try {
		// Fetch token from database
		const secret = await Secret.findOne({ where: { key: 'strava_token' } })
		if (secret && secret.value) {
			const token = JSON.parse(secret.value)

			// Check token expiry
			if (dayjs(token.expires_at).isAfter(dayjs())) {
				return token.access_token
			} else {
				// Refresh token if expired
				const refreshedToken = await refreshToken(token.refresh_token)
				if (refreshedToken) {
					await Secret.update(
						{ value: JSON.stringify(refreshedToken) },
						{ where: { key: 'strava_token' } }
					)
					return refreshedToken.access_token
				}
			}
		}

		// Return null if no code is provided
		if (!code) {
			return null
		}

		// Fetch new token from Strava
		const res = await axios.post('https://www.strava.com/api/v3/oauth/token', {
			client_id: '[CLIENT_ID]',
			client_secret: '[CLIENT_SECRET]',
			grant_type: 'authorization_code',
			code,
		})

		// Store token in database
		await Secret.destroy({ where: { key: 'strava_token' } })
		await Secret.create({
			key: 'strava_token',
			value: JSON.stringify(res.data),
		})

		return res.data.access_token
	} catch (error) {
		console.error('Error fetching token:', error)
		return null
	}
}

// Example data processing code
const Page = async () => {
	const items = await getAllActivities()

	return (
		<WorkoutDiary
			items={JSON.parse(JSON.stringify(items))}
			viewingYear={viewingYear}
		/>
	)
}

export default Page

• Declarative API: Framer Motion embraces a straightforward API that allows developers to define animations and interactions declaratively, using components like motion.div and motion.button.
• Animation Variants: Define variants for components to seamlessly transition between different states. This can include animations for hover effects, page transitions, or complex multi-step animations.
• Gesture Recognition: Easily incorporate gestures like drag, pinch, and swipe into your UI components, enhancing interactivity and user engagement.
• Spring Physics: Framer Motion’s physics-based animations provide natural-looking motion with customizable spring parameters, giving your UI a polished and responsive feel.

1. Component Structure:
   • Receives items prop containing daily data.
2. Layout:
   • Wrapped in a <div> with timeline ID.
   • Each day’s data displayed as a <div> with a data-day attribute formatted by dayjs.
3. Activity Representation:
   • Vertical bars inside each day signify activities.
   • Bar height adjusts based on activity duration.
4. Visual Indicators:
   • Highlights the start of each month with a red bar.
   • Differentiates days with activities from those without.

import dayjs from 'dayjs'

const Timeline = ({ items, isMobile }) => {
	return (
		<div className="flex items-center justify-start w-full h-full">
			<div id="timeline">
				<div className="flex items-center justify-start gap-[6px] px-[50vw] md:px-[120px] min-h-[300px]">
					{items.map((item, i) => (
						<div
							key={i}
							className="relative gap-[10px] w-px h-[300px] overflow-visible"
							data-day={dayjs(item.day).format('YYYY-MM-DD')}
						>
							<div className="absolute bottom-0 left-0 pointer-events-none">
								{item.activities.map((activity, j) => (
									<div
										key={j}
										className={`relative z-20 mt-[5px] w-px pointer-events-none ${
											dayjs(item.day).get('date') === 1 &&
											j === item.activities.length - 1
												? 'bg-red-600'
												: 'bg-white'
										}`}
										style={{
											height: `${activity.duration / (isMobile ? 70 : 50)}px`,
										}}
									/>
								))}
								<div
									className={`absolute bottom-0 left-0 z-10 h-[30px] w-px pointer-events-none ${
										dayjs(item.day).get('date') === 1
											? 'bg-red-600'
											: item.activities.length === 0
											? 'bg-neutral-600'
											: 'bg-transparent'
									}`}
								/>
							</div>
						</div>
					))}
				</div>
			</div>
		</div>
	)
}

export default Timeline

* {
	cursor: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNgYAAAAAMAASsJTYQAAAAASUVORK5CYII='),
		none !important;
}

import { useState, useEffect } from 'react'
import { motion } from 'framer-motion'

// Define the main component
const CustomCursor = ({ isHoveringTimeline }) => {
	const [coords, setCoords] = useState({ x: 0, y: 0 })

	useEffect(() => {
		const handleMouseMove = (event) => {
			setCoords({
				x: event.clientX,
				y: event.clientY,
			})
		}

		document.addEventListener('mousemove', handleMouseMove)
		return () => {
			document.removeEventListener('mousemove', handleMouseMove)
		}
	}, [])

	return (
		<motion.div
			className="fixed z-50 pointer-events-none"
			style={{
				transform: `translate3d(${coords.x}px, ${coords.y}px, 0) translateZ(0)`,
				transition: 'transform 0.4s cubic-bezier(0.215, 0.61, 0.355, 1)',
			}}
		>
			{/* Inner cursor */}
			<motion.div
				className="absolute bg-red-600 rounded-full"
				animate={{
					opacity: isHoveringTimeline ? 1 : 0.6,
					width: isHoveringTimeline ? 2 : 44,
					height: isHoveringTimeline ? 400 : 44,
				}}
				transition={{
					duration: 0.3,
					ease: 'cubic-bezier(0.215, 0.61, 0.355, 1)',
				}}
			>
				{/* Content inside the cursor */}
			</motion.div>
		</motion.div>
	)
}

export default CustomCursor

1. Integrate Data Attributes: Ensure each timeline element (representing days) has a corresponding data attribute that identifies the day.
2. Update Cursor State: Connect the cursor component to listen for mouse movements and update its state (activeDay) based on the hovered day from the timeline.

import { useState, useEffect } from 'react'
import { motion } from 'framer-motion'

const CustomCursor = ({ isHoveringTimeline }) => {
	const [coords, setCoords] = useState({ x: 0, y: 0 })
	const [activeDay, setActiveDay] = useState('')

	useEffect(() => {
		const handleMouseMove = (event) => {
			setCoords({
				x: event.clientX,
				y: event.clientY,
			})
		}

		document.addEventListener('mousemove', handleMouseMove)
		return () => {
			document.removeEventListener('mousemove', handleMouseMove)
		}
	}, [])

	const handleTimelineHover = (event) => {
		const day = event.target.dataset.day || ''
		if (day && day !== '') {
			setActiveDay(day)
		}
	}

	return (
		<motion.div
			className="fixed z-50 pointer-events-none"
			style={{
				transform: `translate3d(${coords.x}px, ${coords.y}px, 0) translateZ(0)`,
				transition: 'transform 0.4s cubic-bezier(0.215, 0.61, 0.355, 1)',
			}}
		>
			{/* Inner cursor */}
			<motion.div
				className="absolute bg-red-600 rounded-full"
				animate={{
					opacity: isHoveringTimeline ? 1 : 0.6,
					width: isHoveringTimeline ? 2 : 44,
					height: isHoveringTimeline ? 400 : 44,
				}}
				transition={{
					duration: 0.3,
					ease: 'cubic-bezier(0.215, 0.61, 0.355, 1)',
				}}
			>
				{/* Content inside the cursor */}
				<motion.div
					className="absolute left-1/2 top-[-5px] transform -translate-x-1/2 text-neutral-200 flex justify-center items-center"
					animate={{
						opacity: activeDay ? 1 : 0,
						filter: activeDay ? 'blur(0)' : 'blur(8px)',
					}}
					transition={{
						duration: 0.3,
						ease: 'cubic-bezier(0.215, 0.61, 0.355, 1)',
					}}
				>
					{activeDay && (
						<div className="absolute bottom-0">
							{/* Display activities for activeDay */}
							<ActivitySummary activities={getActivitiesForDay(activeDay)} />
						</div>
					)}
				</motion.div>
			</motion.div>
		</motion.div>
	)
}

export default CustomCursor

• Data Attribute Integration: Ensure each timeline element (<div>, for example) includes a data-day attribute containing the date or identifier for that specific day.
• Event Handling: Use handleTimelineHover to detect when the cursor hovers over a timeline element. Update activeDay state accordingly.
• Dynamic Content Display: Render ActivitySummary dynamically based on activeDay, providing users with immediate feedback on their cursor's position relative to the timeline.

• Interactive UI Design: The "Workout Diary" features a scroll-based interface on mobile and a custom cursor on desktop, enhancing user engagement and providing a seamless browsing experience.
• Data Integration: Leveraging data from the Apple Health app synced via Strava's API demonstrated the power of real-time data synchronization and visualization in web applications.
• Technical Implementation: Using Next.js for server-side rendering and client-side interactivity allowed for efficient data fetching, processing, and dynamic UI updates, optimizing both performance and user experience.

• Enhanced Interactivity: Further improving cursor animations and integrating additional hover effects could elevate user interaction, making the diary even more intuitive and engaging.
• Data Insights: Exploring ways to visualize workout trends and statistics over time could provide valuable insights into fitness progress and habits.