mirror of
https://github.com/wshobson/agents.git
synced 2026-03-18 09:37:15 +00:00
style: format all files with prettier
This commit is contained in:
Seth Hobson
@@ -23,6 +23,7 @@ Create engaging, intuitive interactions through motion, feedback, and thoughtful
|
||||
### 1. Purposeful Motion
|
||||
|
||||
Motion should communicate, not decorate:
|
||||
|
||||
- **Feedback**: Confirm user actions occurred
|
||||
- **Orientation**: Show where elements come from/go to
|
||||
- **Focus**: Direct attention to important changes
|
||||
@@ -30,27 +31,27 @@ Motion should communicate, not decorate:
|
||||
|
||||
### 2. Timing Guidelines
|
||||
|
||||
| Duration | Use Case |
|
||||
|----------|----------|
|
||||
| 100-150ms | Micro-feedback (hovers, clicks) |
|
||||
| 200-300ms | Small transitions (toggles, dropdowns) |
|
||||
| Duration | Use Case |
|
||||
| --------- | ----------------------------------------- |
|
||||
| 100-150ms | Micro-feedback (hovers, clicks) |
|
||||
| 200-300ms | Small transitions (toggles, dropdowns) |
|
||||
| 300-500ms | Medium transitions (modals, page changes) |
|
||||
| 500ms+ | Complex choreographed animations |
|
||||
| 500ms+ | Complex choreographed animations |
|
||||
|
||||
### 3. Easing Functions
|
||||
|
||||
```css
|
||||
/* Common easings */
|
||||
--ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* Decelerate - entering */
|
||||
--ease-in: cubic-bezier(0.55, 0, 1, 0.45); /* Accelerate - exiting */
|
||||
--ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); /* Both - moving between */
|
||||
--spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* Overshoot - playful */
|
||||
--ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* Decelerate - entering */
|
||||
--ease-in: cubic-bezier(0.55, 0, 1, 0.45); /* Accelerate - exiting */
|
||||
--ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); /* Both - moving between */
|
||||
--spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* Overshoot - playful */
|
||||
```
|
||||
|
||||
## Quick Start: Button Microinteraction
|
||||
|
||||
```tsx
|
||||
import { motion } from 'framer-motion';
|
||||
import { motion } from "framer-motion";
|
||||
|
||||
export function InteractiveButton({ children, onClick }) {
|
||||
return (
|
||||
@@ -58,7 +59,7 @@ export function InteractiveButton({ children, onClick }) {
|
||||
onClick={onClick}
|
||||
whileHover={{ scale: 1.02 }}
|
||||
whileTap={{ scale: 0.98 }}
|
||||
transition={{ type: 'spring', stiffness: 400, damping: 17 }}
|
||||
transition={{ type: "spring", stiffness: 400, damping: 17 }}
|
||||
className="px-4 py-2 bg-blue-600 text-white rounded-lg"
|
||||
>
|
||||
{children}
|
||||
@@ -72,6 +73,7 @@ export function InteractiveButton({ children, onClick }) {
|
||||
### 1. Loading States
|
||||
|
||||
**Skeleton Screens**: Preserve layout while loading
|
||||
|
||||
```tsx
|
||||
function CardSkeleton() {
|
||||
return (
|
||||
@@ -85,6 +87,7 @@ function CardSkeleton() {
|
||||
```
|
||||
|
||||
**Progress Indicators**: Show determinate progress
|
||||
|
||||
```tsx
|
||||
function ProgressBar({ progress }: { progress: number }) {
|
||||
return (
|
||||
@@ -93,7 +96,7 @@ function ProgressBar({ progress }: { progress: number }) {
|
||||
className="h-full bg-blue-600"
|
||||
initial={{ width: 0 }}
|
||||
animate={{ width: `${progress}%` }}
|
||||
transition={{ ease: 'easeOut' }}
|
||||
transition={{ ease: "easeOut" }}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
@@ -103,6 +106,7 @@ function ProgressBar({ progress }: { progress: number }) {
|
||||
### 2. State Transitions
|
||||
|
||||
**Toggle with smooth transition**:
|
||||
|
||||
```tsx
|
||||
function Toggle({ checked, onChange }) {
|
||||
return (
|
||||
@@ -112,13 +116,13 @@ function Toggle({ checked, onChange }) {
|
||||
onClick={() => onChange(!checked)}
|
||||
className={`
|
||||
relative w-12 h-6 rounded-full transition-colors duration-200
|
||||
${checked ? 'bg-blue-600' : 'bg-gray-300'}
|
||||
${checked ? "bg-blue-600" : "bg-gray-300"}
|
||||
`}
|
||||
>
|
||||
<motion.span
|
||||
className="absolute top-1 left-1 w-4 h-4 bg-white rounded-full shadow"
|
||||
animate={{ x: checked ? 24 : 0 }}
|
||||
transition={{ type: 'spring', stiffness: 500, damping: 30 }}
|
||||
transition={{ type: "spring", stiffness: 500, damping: 30 }}
|
||||
/>
|
||||
</button>
|
||||
);
|
||||
@@ -128,8 +132,9 @@ function Toggle({ checked, onChange }) {
|
||||
### 3. Page Transitions
|
||||
|
||||
**Framer Motion layout animations**:
|
||||
|
||||
```tsx
|
||||
import { AnimatePresence, motion } from 'framer-motion';
|
||||
import { AnimatePresence, motion } from "framer-motion";
|
||||
|
||||
function PageTransition({ children, key }) {
|
||||
return (
|
||||
@@ -151,6 +156,7 @@ function PageTransition({ children, key }) {
|
||||
### 4. Feedback Patterns
|
||||
|
||||
**Ripple effect on click**:
|
||||
|
||||
```tsx
|
||||
function RippleButton({ children, onClick }) {
|
||||
const [ripples, setRipples] = useState([]);
|
||||
@@ -162,9 +168,9 @@ function RippleButton({ children, onClick }) {
|
||||
y: e.clientY - rect.top,
|
||||
id: Date.now(),
|
||||
};
|
||||
setRipples(prev => [...prev, ripple]);
|
||||
setRipples((prev) => [...prev, ripple]);
|
||||
setTimeout(() => {
|
||||
setRipples(prev => prev.filter(r => r.id !== ripple.id));
|
||||
setRipples((prev) => prev.filter((r) => r.id !== ripple.id));
|
||||
}, 600);
|
||||
onClick?.(e);
|
||||
};
|
||||
@@ -172,7 +178,7 @@ function RippleButton({ children, onClick }) {
|
||||
return (
|
||||
<button onClick={handleClick} className="relative overflow-hidden">
|
||||
{children}
|
||||
{ripples.map(ripple => (
|
||||
{ripples.map((ripple) => (
|
||||
<span
|
||||
key={ripple.id}
|
||||
className="absolute bg-white/30 rounded-full animate-ripple"
|
||||
@@ -187,6 +193,7 @@ function RippleButton({ children, onClick }) {
|
||||
### 5. Gesture Interactions
|
||||
|
||||
**Swipe to dismiss**:
|
||||
|
||||
```tsx
|
||||
function SwipeCard({ children, onDismiss }) {
|
||||
return (
|
||||
@@ -212,29 +219,50 @@ function SwipeCard({ children, onDismiss }) {
|
||||
|
||||
```css
|
||||
@keyframes fadeIn {
|
||||
from { opacity: 0; transform: translateY(10px); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(10px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
0%, 100% { opacity: 1; }
|
||||
50% { opacity: 0.5; }
|
||||
0%,
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
50% {
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
to { transform: rotate(360deg); }
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
.animate-fadeIn { animation: fadeIn 0.3s ease-out; }
|
||||
.animate-pulse { animation: pulse 2s ease-in-out infinite; }
|
||||
.animate-spin { animation: spin 1s linear infinite; }
|
||||
.animate-fadeIn {
|
||||
animation: fadeIn 0.3s ease-out;
|
||||
}
|
||||
.animate-pulse {
|
||||
animation: pulse 2s ease-in-out infinite;
|
||||
}
|
||||
.animate-spin {
|
||||
animation: spin 1s linear infinite;
|
||||
}
|
||||
```
|
||||
|
||||
### CSS Transitions
|
||||
|
||||
```css
|
||||
.card {
|
||||
transition: transform 0.2s ease-out, box-shadow 0.2s ease-out;
|
||||
transition:
|
||||
transform 0.2s ease-out,
|
||||
box-shadow 0.2s ease-out;
|
||||
}
|
||||
|
||||
.card:hover {
|
||||
@@ -248,7 +276,9 @@ function SwipeCard({ children, onDismiss }) {
|
||||
```css
|
||||
/* Respect user motion preferences */
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
*, *::before, *::after {
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
animation-duration: 0.01ms !important;
|
||||
animation-iteration-count: 1 !important;
|
||||
transition-duration: 0.01ms !important;
|
||||
@@ -259,7 +289,7 @@ function SwipeCard({ children, onDismiss }) {
|
||||
```tsx
|
||||
function AnimatedComponent() {
|
||||
const prefersReducedMotion = window.matchMedia(
|
||||
'(prefers-reduced-motion: reduce)'
|
||||
"(prefers-reduced-motion: reduce)",
|
||||
).matches;
|
||||
|
||||
return (
|
||||
|
||||
@@ -7,7 +7,7 @@ The most popular React animation library with declarative API.
|
||||
### Basic Animations
|
||||
|
||||
```tsx
|
||||
import { motion, AnimatePresence } from 'framer-motion';
|
||||
import { motion, AnimatePresence } from "framer-motion";
|
||||
|
||||
// Simple animation
|
||||
function FadeIn({ children }) {
|
||||
@@ -29,7 +29,7 @@ function InteractiveCard() {
|
||||
<motion.div
|
||||
whileHover={{ scale: 1.02, y: -4 }}
|
||||
whileTap={{ scale: 0.98 }}
|
||||
transition={{ type: 'spring', stiffness: 400, damping: 17 }}
|
||||
transition={{ type: "spring", stiffness: 400, damping: 17 }}
|
||||
className="p-6 bg-white rounded-lg shadow"
|
||||
>
|
||||
Hover or tap me
|
||||
@@ -44,9 +44,9 @@ function PulseButton() {
|
||||
animate={{
|
||||
scale: [1, 1.05, 1],
|
||||
boxShadow: [
|
||||
'0 0 0 0 rgba(59, 130, 246, 0.5)',
|
||||
'0 0 0 10px rgba(59, 130, 246, 0)',
|
||||
'0 0 0 0 rgba(59, 130, 246, 0)',
|
||||
"0 0 0 0 rgba(59, 130, 246, 0.5)",
|
||||
"0 0 0 10px rgba(59, 130, 246, 0)",
|
||||
"0 0 0 0 rgba(59, 130, 246, 0)",
|
||||
],
|
||||
}}
|
||||
transition={{ duration: 2, repeat: Infinity }}
|
||||
@@ -61,7 +61,7 @@ function PulseButton() {
|
||||
### Layout Animations
|
||||
|
||||
```tsx
|
||||
import { motion, LayoutGroup } from 'framer-motion';
|
||||
import { motion, LayoutGroup } from "framer-motion";
|
||||
|
||||
// Shared layout animation
|
||||
function TabIndicator({ activeTab, tabs }) {
|
||||
@@ -78,7 +78,7 @@ function TabIndicator({ activeTab, tabs }) {
|
||||
<motion.div
|
||||
layoutId="activeTab"
|
||||
className="absolute bottom-0 left-0 right-0 h-0.5 bg-blue-600"
|
||||
transition={{ type: 'spring', stiffness: 500, damping: 30 }}
|
||||
transition={{ type: "spring", stiffness: 500, damping: 30 }}
|
||||
/>
|
||||
)}
|
||||
</button>
|
||||
@@ -131,11 +131,7 @@ const itemVariants = {
|
||||
|
||||
function StaggeredList({ items }) {
|
||||
return (
|
||||
<motion.ul
|
||||
variants={containerVariants}
|
||||
initial="hidden"
|
||||
animate="visible"
|
||||
>
|
||||
<motion.ul variants={containerVariants} initial="hidden" animate="visible">
|
||||
{items.map((item) => (
|
||||
<motion.li key={item.id} variants={itemVariants}>
|
||||
{item.content}
|
||||
@@ -149,8 +145,8 @@ function StaggeredList({ items }) {
|
||||
### Page Transitions
|
||||
|
||||
```tsx
|
||||
import { AnimatePresence, motion } from 'framer-motion';
|
||||
import { useRouter } from 'next/router';
|
||||
import { AnimatePresence, motion } from "framer-motion";
|
||||
import { useRouter } from "next/router";
|
||||
|
||||
const pageVariants = {
|
||||
initial: { opacity: 0, x: -20 },
|
||||
@@ -185,8 +181,8 @@ Industry-standard animation library for complex, performant animations.
|
||||
### Basic Timeline
|
||||
|
||||
```tsx
|
||||
import { useRef, useLayoutEffect } from 'react';
|
||||
import gsap from 'gsap';
|
||||
import { useRef, useLayoutEffect } from "react";
|
||||
import gsap from "gsap";
|
||||
|
||||
function AnimatedHero() {
|
||||
const containerRef = useRef<HTMLDivElement>(null);
|
||||
@@ -195,7 +191,7 @@ function AnimatedHero() {
|
||||
|
||||
useLayoutEffect(() => {
|
||||
const ctx = gsap.context(() => {
|
||||
const tl = gsap.timeline({ defaults: { ease: 'power3.out' } });
|
||||
const tl = gsap.timeline({ defaults: { ease: "power3.out" } });
|
||||
|
||||
tl.from(titleRef.current, {
|
||||
y: 50,
|
||||
@@ -209,9 +205,9 @@ function AnimatedHero() {
|
||||
opacity: 0,
|
||||
duration: 0.6,
|
||||
},
|
||||
'-=0.4' // Start 0.4s before previous ends
|
||||
"-=0.4", // Start 0.4s before previous ends
|
||||
)
|
||||
.from('.cta-button', {
|
||||
.from(".cta-button", {
|
||||
scale: 0.8,
|
||||
opacity: 0,
|
||||
duration: 0.4,
|
||||
@@ -234,9 +230,9 @@ function AnimatedHero() {
|
||||
### ScrollTrigger
|
||||
|
||||
```tsx
|
||||
import { useLayoutEffect, useRef } from 'react';
|
||||
import gsap from 'gsap';
|
||||
import { ScrollTrigger } from 'gsap/ScrollTrigger';
|
||||
import { useLayoutEffect, useRef } from "react";
|
||||
import gsap from "gsap";
|
||||
import { ScrollTrigger } from "gsap/ScrollTrigger";
|
||||
|
||||
gsap.registerPlugin(ScrollTrigger);
|
||||
|
||||
@@ -249,24 +245,24 @@ function ParallaxSection() {
|
||||
// Parallax image
|
||||
gsap.to(imageRef.current, {
|
||||
yPercent: -20,
|
||||
ease: 'none',
|
||||
ease: "none",
|
||||
scrollTrigger: {
|
||||
trigger: sectionRef.current,
|
||||
start: 'top bottom',
|
||||
end: 'bottom top',
|
||||
start: "top bottom",
|
||||
end: "bottom top",
|
||||
scrub: true,
|
||||
},
|
||||
});
|
||||
|
||||
// Fade in content
|
||||
gsap.from('.content-block', {
|
||||
gsap.from(".content-block", {
|
||||
opacity: 0,
|
||||
y: 50,
|
||||
stagger: 0.2,
|
||||
scrollTrigger: {
|
||||
trigger: sectionRef.current,
|
||||
start: 'top 80%',
|
||||
end: 'top 20%',
|
||||
start: "top 80%",
|
||||
end: "top 20%",
|
||||
scrub: 1,
|
||||
},
|
||||
});
|
||||
@@ -290,9 +286,9 @@ function ParallaxSection() {
|
||||
### Text Animation
|
||||
|
||||
```tsx
|
||||
import { useLayoutEffect, useRef } from 'react';
|
||||
import gsap from 'gsap';
|
||||
import { SplitText } from 'gsap/SplitText';
|
||||
import { useLayoutEffect, useRef } from "react";
|
||||
import gsap from "gsap";
|
||||
import { SplitText } from "gsap/SplitText";
|
||||
|
||||
gsap.registerPlugin(SplitText);
|
||||
|
||||
@@ -301,8 +297,8 @@ function AnimatedHeadline({ text }) {
|
||||
|
||||
useLayoutEffect(() => {
|
||||
const split = new SplitText(textRef.current, {
|
||||
type: 'chars,words',
|
||||
charsClass: 'char',
|
||||
type: "chars,words",
|
||||
charsClass: "char",
|
||||
});
|
||||
|
||||
gsap.from(split.chars, {
|
||||
@@ -311,7 +307,7 @@ function AnimatedHeadline({ text }) {
|
||||
rotateX: -90,
|
||||
stagger: 0.02,
|
||||
duration: 0.8,
|
||||
ease: 'back.out(1.7)',
|
||||
ease: "back.out(1.7)",
|
||||
});
|
||||
|
||||
return () => split.revert();
|
||||
@@ -362,7 +358,7 @@ Native browser animation API for simple animations.
|
||||
function useWebAnimation(
|
||||
ref: RefObject<HTMLElement>,
|
||||
keyframes: Keyframe[],
|
||||
options: KeyframeAnimationOptions
|
||||
options: KeyframeAnimationOptions,
|
||||
) {
|
||||
useEffect(() => {
|
||||
if (!ref.current) return;
|
||||
@@ -380,14 +376,14 @@ function SlideIn({ children }) {
|
||||
useWebAnimation(
|
||||
elementRef,
|
||||
[
|
||||
{ transform: 'translateX(-100%)', opacity: 0 },
|
||||
{ transform: 'translateX(0)', opacity: 1 },
|
||||
{ transform: "translateX(-100%)", opacity: 0 },
|
||||
{ transform: "translateX(0)", opacity: 1 },
|
||||
],
|
||||
{
|
||||
duration: 300,
|
||||
easing: 'cubic-bezier(0.16, 1, 0.3, 1)',
|
||||
fill: 'forwards',
|
||||
}
|
||||
easing: "cubic-bezier(0.16, 1, 0.3, 1)",
|
||||
fill: "forwards",
|
||||
},
|
||||
);
|
||||
|
||||
return <div ref={elementRef}>{children}</div>;
|
||||
@@ -400,7 +396,7 @@ Native browser API for page transitions.
|
||||
|
||||
```tsx
|
||||
// Check support
|
||||
const supportsViewTransitions = 'startViewTransition' in document;
|
||||
const supportsViewTransitions = "startViewTransition" in document;
|
||||
|
||||
// Simple page transition
|
||||
async function navigateTo(url: string) {
|
||||
@@ -456,7 +452,9 @@ function ProductCard({ product }) {
|
||||
|
||||
/* Only animate transform and opacity for 60fps */
|
||||
.smooth {
|
||||
transition: transform 0.3s ease, opacity 0.3s ease;
|
||||
transition:
|
||||
transform 0.3s ease,
|
||||
opacity 0.3s ease;
|
||||
}
|
||||
|
||||
/* Avoid animating these (cause reflow) */
|
||||
@@ -472,12 +470,12 @@ function useReducedMotion() {
|
||||
const [prefersReduced, setPrefersReduced] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
const mq = window.matchMedia('(prefers-reduced-motion: reduce)');
|
||||
const mq = window.matchMedia("(prefers-reduced-motion: reduce)");
|
||||
setPrefersReduced(mq.matches);
|
||||
|
||||
const handler = (e: MediaQueryListEvent) => setPrefersReduced(e.matches);
|
||||
mq.addEventListener('change', handler);
|
||||
return () => mq.removeEventListener('change', handler);
|
||||
mq.addEventListener("change", handler);
|
||||
return () => mq.removeEventListener("change", handler);
|
||||
}, []);
|
||||
|
||||
return prefersReduced;
|
||||
|
||||
@@ -5,7 +5,7 @@
|
||||
### Loading Button
|
||||
|
||||
```tsx
|
||||
import { motion, AnimatePresence } from 'framer-motion';
|
||||
import { motion, AnimatePresence } from "framer-motion";
|
||||
|
||||
interface LoadingButtonProps {
|
||||
isLoading: boolean;
|
||||
@@ -71,17 +71,19 @@ function Spinner({ className }: { className?: string }) {
|
||||
|
||||
```tsx
|
||||
function SubmitButton({ onSubmit }: { onSubmit: () => Promise<void> }) {
|
||||
const [state, setState] = useState<'idle' | 'loading' | 'success' | 'error'>('idle');
|
||||
const [state, setState] = useState<"idle" | "loading" | "success" | "error">(
|
||||
"idle",
|
||||
);
|
||||
|
||||
const handleClick = async () => {
|
||||
setState('loading');
|
||||
setState("loading");
|
||||
try {
|
||||
await onSubmit();
|
||||
setState('success');
|
||||
setTimeout(() => setState('idle'), 2000);
|
||||
setState("success");
|
||||
setTimeout(() => setState("idle"), 2000);
|
||||
} catch {
|
||||
setState('error');
|
||||
setTimeout(() => setState('idle'), 2000);
|
||||
setState("error");
|
||||
setTimeout(() => setState("idle"), 2000);
|
||||
}
|
||||
};
|
||||
|
||||
@@ -93,18 +95,20 @@ function SubmitButton({ onSubmit }: { onSubmit: () => Promise<void> }) {
|
||||
};
|
||||
|
||||
const colors = {
|
||||
idle: 'bg-blue-600 hover:bg-blue-700',
|
||||
loading: 'bg-blue-600',
|
||||
success: 'bg-green-600',
|
||||
error: 'bg-red-600',
|
||||
idle: "bg-blue-600 hover:bg-blue-700",
|
||||
loading: "bg-blue-600",
|
||||
success: "bg-green-600",
|
||||
error: "bg-red-600",
|
||||
};
|
||||
|
||||
return (
|
||||
<motion.button
|
||||
onClick={handleClick}
|
||||
disabled={state === 'loading'}
|
||||
disabled={state === "loading"}
|
||||
className={`flex items-center gap-2 px-4 py-2 text-white rounded-lg transition-colors ${colors[state]}`}
|
||||
animate={{ scale: state === 'success' || state === 'error' ? [1, 1.05, 1] : 1 }}
|
||||
animate={{
|
||||
scale: state === "success" || state === "error" ? [1, 1.05, 1] : 1,
|
||||
}}
|
||||
>
|
||||
<AnimatePresence mode="wait">
|
||||
{icons[state] && (
|
||||
@@ -118,10 +122,10 @@ function SubmitButton({ onSubmit }: { onSubmit: () => Promise<void> }) {
|
||||
</motion.span>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
{state === 'idle' && 'Submit'}
|
||||
{state === 'loading' && 'Submitting...'}
|
||||
{state === 'success' && 'Done!'}
|
||||
{state === 'error' && 'Failed'}
|
||||
{state === "idle" && "Submit"}
|
||||
{state === "loading" && "Submitting..."}
|
||||
{state === "success" && "Done!"}
|
||||
{state === "error" && "Failed"}
|
||||
</motion.button>
|
||||
);
|
||||
}
|
||||
@@ -132,10 +136,16 @@ function SubmitButton({ onSubmit }: { onSubmit: () => Promise<void> }) {
|
||||
### Floating Label Input
|
||||
|
||||
```tsx
|
||||
import { useState, useId } from 'react';
|
||||
import { useState, useId } from "react";
|
||||
|
||||
function FloatingInput({ label, type = 'text' }: { label: string; type?: string }) {
|
||||
const [value, setValue] = useState('');
|
||||
function FloatingInput({
|
||||
label,
|
||||
type = "text",
|
||||
}: {
|
||||
label: string;
|
||||
type?: string;
|
||||
}) {
|
||||
const [value, setValue] = useState("");
|
||||
const [isFocused, setIsFocused] = useState(false);
|
||||
const id = useId();
|
||||
|
||||
@@ -156,9 +166,10 @@ function FloatingInput({ label, type = 'text' }: { label: string; type?: string
|
||||
<label
|
||||
htmlFor={id}
|
||||
className={`absolute left-4 transition-all duration-200 pointer-events-none
|
||||
${isFloating
|
||||
? 'top-0 -translate-y-1/2 text-xs bg-white px-1 text-blue-600'
|
||||
: 'top-1/2 -translate-y-1/2 text-gray-500'
|
||||
${
|
||||
isFloating
|
||||
? "top-0 -translate-y-1/2 text-xs bg-white px-1 text-blue-600"
|
||||
: "top-1/2 -translate-y-1/2 text-gray-500"
|
||||
}`}
|
||||
>
|
||||
{label}
|
||||
@@ -171,7 +182,7 @@ function FloatingInput({ label, type = 'text' }: { label: string; type?: string
|
||||
### Shake on Error
|
||||
|
||||
```tsx
|
||||
import { motion, useAnimation } from 'framer-motion';
|
||||
import { motion, useAnimation } from "framer-motion";
|
||||
|
||||
function ShakeInput({ error, ...props }: InputProps & { error?: string }) {
|
||||
const controls = useAnimation();
|
||||
@@ -190,7 +201,7 @@ function ShakeInput({ error, ...props }: InputProps & { error?: string }) {
|
||||
<input
|
||||
{...props}
|
||||
className={`w-full px-4 py-2 border rounded-lg ${
|
||||
error ? 'border-red-500' : 'border-gray-300'
|
||||
error ? "border-red-500" : "border-gray-300"
|
||||
}`}
|
||||
/>
|
||||
{error && (
|
||||
@@ -211,7 +222,7 @@ function ShakeInput({ error, ...props }: InputProps & { error?: string }) {
|
||||
|
||||
```tsx
|
||||
function TextareaWithCount({ maxLength = 280 }: { maxLength?: number }) {
|
||||
const [value, setValue] = useState('');
|
||||
const [value, setValue] = useState("");
|
||||
const remaining = maxLength - value.length;
|
||||
const isNearLimit = remaining <= 20;
|
||||
const isOverLimit = remaining < 0;
|
||||
@@ -226,7 +237,11 @@ function TextareaWithCount({ maxLength = 280 }: { maxLength?: number }) {
|
||||
/>
|
||||
<motion.span
|
||||
className={`absolute bottom-2 right-2 text-sm ${
|
||||
isOverLimit ? 'text-red-500' : isNearLimit ? 'text-yellow-500' : 'text-gray-400'
|
||||
isOverLimit
|
||||
? "text-red-500"
|
||||
: isNearLimit
|
||||
? "text-yellow-500"
|
||||
: "text-gray-400"
|
||||
}`}
|
||||
animate={{ scale: isNearLimit ? [1, 1.1, 1] : 1 }}
|
||||
transition={{ duration: 0.2 }}
|
||||
@@ -243,23 +258,23 @@ function TextareaWithCount({ maxLength = 280 }: { maxLength?: number }) {
|
||||
### Toast Notifications
|
||||
|
||||
```tsx
|
||||
import { motion, AnimatePresence } from 'framer-motion';
|
||||
import { createContext, useContext, useState, useCallback } from 'react';
|
||||
import { motion, AnimatePresence } from "framer-motion";
|
||||
import { createContext, useContext, useState, useCallback } from "react";
|
||||
|
||||
interface Toast {
|
||||
id: string;
|
||||
message: string;
|
||||
type: 'success' | 'error' | 'info';
|
||||
type: "success" | "error" | "info";
|
||||
}
|
||||
|
||||
const ToastContext = createContext<{
|
||||
addToast: (message: string, type: Toast['type']) => void;
|
||||
addToast: (message: string, type: Toast["type"]) => void;
|
||||
} | null>(null);
|
||||
|
||||
export function ToastProvider({ children }: { children: React.ReactNode }) {
|
||||
const [toasts, setToasts] = useState<Toast[]>([]);
|
||||
|
||||
const addToast = useCallback((message: string, type: Toast['type']) => {
|
||||
const addToast = useCallback((message: string, type: Toast["type"]) => {
|
||||
const id = Date.now().toString();
|
||||
setToasts((prev) => [...prev, { id, message, type }]);
|
||||
setTimeout(() => {
|
||||
@@ -279,8 +294,11 @@ export function ToastProvider({ children }: { children: React.ReactNode }) {
|
||||
animate={{ opacity: 1, y: 0, scale: 1 }}
|
||||
exit={{ opacity: 0, x: 100, scale: 0.95 }}
|
||||
className={`px-4 py-3 rounded-lg shadow-lg ${
|
||||
toast.type === 'success' ? 'bg-green-600' :
|
||||
toast.type === 'error' ? 'bg-red-600' : 'bg-blue-600'
|
||||
toast.type === "success"
|
||||
? "bg-green-600"
|
||||
: toast.type === "error"
|
||||
? "bg-red-600"
|
||||
: "bg-blue-600"
|
||||
} text-white`}
|
||||
>
|
||||
{toast.message}
|
||||
@@ -294,7 +312,7 @@ export function ToastProvider({ children }: { children: React.ReactNode }) {
|
||||
|
||||
export function useToast() {
|
||||
const context = useContext(ToastContext);
|
||||
if (!context) throw new Error('useToast must be within ToastProvider');
|
||||
if (!context) throw new Error("useToast must be within ToastProvider");
|
||||
return context;
|
||||
}
|
||||
```
|
||||
@@ -304,7 +322,7 @@ export function useToast() {
|
||||
```tsx
|
||||
function ConfirmButton({
|
||||
onConfirm,
|
||||
confirmText = 'Click again to confirm',
|
||||
confirmText = "Click again to confirm",
|
||||
children,
|
||||
}: {
|
||||
onConfirm: () => void;
|
||||
@@ -333,13 +351,13 @@ function ConfirmButton({
|
||||
<motion.button
|
||||
onClick={handleClick}
|
||||
className={`px-4 py-2 rounded-lg transition-colors ${
|
||||
isPending ? 'bg-red-600 text-white' : 'bg-gray-200 text-gray-800'
|
||||
isPending ? "bg-red-600 text-white" : "bg-gray-200 text-gray-800"
|
||||
}`}
|
||||
animate={{ scale: isPending ? [1, 1.02, 1] : 1 }}
|
||||
>
|
||||
<AnimatePresence mode="wait">
|
||||
<motion.span
|
||||
key={isPending ? 'confirm' : 'idle'}
|
||||
key={isPending ? "confirm" : "idle"}
|
||||
initial={{ opacity: 0, y: 10 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
exit={{ opacity: 0, y: -10 }}
|
||||
@@ -357,8 +375,8 @@ function ConfirmButton({
|
||||
### Active Link Indicator
|
||||
|
||||
```tsx
|
||||
import { motion } from 'framer-motion';
|
||||
import { usePathname } from 'next/navigation';
|
||||
import { motion } from "framer-motion";
|
||||
import { usePathname } from "next/navigation";
|
||||
|
||||
function Navigation({ items }: { items: { href: string; label: string }[] }) {
|
||||
const pathname = usePathname();
|
||||
@@ -372,14 +390,14 @@ function Navigation({ items }: { items: { href: string; label: string }[] }) {
|
||||
key={item.href}
|
||||
href={item.href}
|
||||
className={`relative px-4 py-2 text-sm font-medium ${
|
||||
isActive ? 'text-white' : 'text-gray-600 hover:text-gray-900'
|
||||
isActive ? "text-white" : "text-gray-600 hover:text-gray-900"
|
||||
}`}
|
||||
>
|
||||
{isActive && (
|
||||
<motion.div
|
||||
layoutId="activeNav"
|
||||
className="absolute inset-0 bg-blue-600 rounded-md"
|
||||
transition={{ type: 'spring', stiffness: 500, damping: 30 }}
|
||||
transition={{ type: "spring", stiffness: 500, damping: 30 }}
|
||||
/>
|
||||
)}
|
||||
<span className="relative z-10">{item.label}</span>
|
||||
@@ -400,9 +418,9 @@ function MenuIcon({ isOpen }: { isOpen: boolean }) {
|
||||
<motion.span
|
||||
className="absolute left-0 h-0.5 w-6 bg-current"
|
||||
animate={{
|
||||
top: isOpen ? '50%' : '25%',
|
||||
top: isOpen ? "50%" : "25%",
|
||||
rotate: isOpen ? 45 : 0,
|
||||
translateY: isOpen ? '-50%' : 0,
|
||||
translateY: isOpen ? "-50%" : 0,
|
||||
}}
|
||||
transition={{ duration: 0.2 }}
|
||||
/>
|
||||
@@ -414,9 +432,9 @@ function MenuIcon({ isOpen }: { isOpen: boolean }) {
|
||||
<motion.span
|
||||
className="absolute left-0 h-0.5 w-6 bg-current"
|
||||
animate={{
|
||||
bottom: isOpen ? '50%' : '25%',
|
||||
bottom: isOpen ? "50%" : "25%",
|
||||
rotate: isOpen ? -45 : 0,
|
||||
translateY: isOpen ? '50%' : 0,
|
||||
translateY: isOpen ? "50%" : 0,
|
||||
}}
|
||||
transition={{ duration: 0.2 }}
|
||||
/>
|
||||
@@ -453,7 +471,7 @@ function LikeButton({ postId, initialLiked, initialCount }) {
|
||||
<motion.button
|
||||
onClick={handleLike}
|
||||
whileTap={{ scale: 0.9 }}
|
||||
className={`flex items-center gap-2 ${liked ? 'text-red-500' : 'text-gray-500'}`}
|
||||
className={`flex items-center gap-2 ${liked ? "text-red-500" : "text-gray-500"}`}
|
||||
>
|
||||
<motion.span
|
||||
animate={{ scale: liked ? [1, 1.3, 1] : 1 }}
|
||||
@@ -479,7 +497,7 @@ function LikeButton({ postId, initialLiked, initialCount }) {
|
||||
### Pull to Refresh
|
||||
|
||||
```tsx
|
||||
import { motion, useMotionValue, useTransform } from 'framer-motion';
|
||||
import { motion, useMotionValue, useTransform } from "framer-motion";
|
||||
|
||||
function PullToRefresh({ onRefresh, children }) {
|
||||
const y = useMotionValue(0);
|
||||
|
||||
@@ -3,7 +3,7 @@
|
||||
## Intersection Observer Hook
|
||||
|
||||
```tsx
|
||||
import { useEffect, useRef, useState, type RefObject } from 'react';
|
||||
import { useEffect, useRef, useState, type RefObject } from "react";
|
||||
|
||||
interface UseInViewOptions {
|
||||
threshold?: number | number[];
|
||||
@@ -13,7 +13,7 @@ interface UseInViewOptions {
|
||||
|
||||
function useInView<T extends HTMLElement>({
|
||||
threshold = 0,
|
||||
rootMargin = '0px',
|
||||
rootMargin = "0px",
|
||||
triggerOnce = false,
|
||||
}: UseInViewOptions = {}): [RefObject<T>, boolean] {
|
||||
const ref = useRef<T>(null);
|
||||
@@ -31,7 +31,7 @@ function useInView<T extends HTMLElement>({
|
||||
observer.unobserve(element);
|
||||
}
|
||||
},
|
||||
{ threshold, rootMargin }
|
||||
{ threshold, rootMargin },
|
||||
);
|
||||
|
||||
observer.observe(element);
|
||||
@@ -49,7 +49,7 @@ function FadeInSection({ children }) {
|
||||
<div
|
||||
ref={ref}
|
||||
className={`transition-all duration-700 ${
|
||||
isInView ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-8'
|
||||
isInView ? "opacity-100 translate-y-0" : "opacity-0 translate-y-8"
|
||||
}`}
|
||||
>
|
||||
{children}
|
||||
@@ -61,7 +61,7 @@ function FadeInSection({ children }) {
|
||||
## Scroll Progress Indicator
|
||||
|
||||
```tsx
|
||||
import { motion, useScroll, useSpring } from 'framer-motion';
|
||||
import { motion, useScroll, useSpring } from "framer-motion";
|
||||
|
||||
function ScrollProgress() {
|
||||
const { scrollYProgress } = useScroll();
|
||||
@@ -104,26 +104,23 @@ function ScrollProgress() {
|
||||
### Framer Motion Parallax
|
||||
|
||||
```tsx
|
||||
import { motion, useScroll, useTransform } from 'framer-motion';
|
||||
import { motion, useScroll, useTransform } from "framer-motion";
|
||||
|
||||
function ParallaxHero() {
|
||||
const ref = useRef(null);
|
||||
const { scrollYProgress } = useScroll({
|
||||
target: ref,
|
||||
offset: ['start start', 'end start'],
|
||||
offset: ["start start", "end start"],
|
||||
});
|
||||
|
||||
const y = useTransform(scrollYProgress, [0, 1], ['0%', '50%']);
|
||||
const y = useTransform(scrollYProgress, [0, 1], ["0%", "50%"]);
|
||||
const opacity = useTransform(scrollYProgress, [0, 0.5], [1, 0]);
|
||||
const scale = useTransform(scrollYProgress, [0, 1], [1, 1.2]);
|
||||
|
||||
return (
|
||||
<section ref={ref} className="relative h-screen overflow-hidden">
|
||||
{/* Background image with parallax */}
|
||||
<motion.div
|
||||
style={{ y, scale }}
|
||||
className="absolute inset-0"
|
||||
>
|
||||
<motion.div style={{ y, scale }} className="absolute inset-0">
|
||||
<img src="/hero-bg.jpg" alt="" className="w-full h-full object-cover" />
|
||||
</motion.div>
|
||||
|
||||
@@ -148,7 +145,7 @@ function ScrollAnimation() {
|
||||
const containerRef = useRef(null);
|
||||
const { scrollYProgress } = useScroll({
|
||||
target: containerRef,
|
||||
offset: ['start end', 'end start'],
|
||||
offset: ["start end", "end start"],
|
||||
});
|
||||
|
||||
// Different transformations based on scroll progress
|
||||
@@ -157,7 +154,7 @@ function ScrollAnimation() {
|
||||
const backgroundColor = useTransform(
|
||||
scrollYProgress,
|
||||
[0, 0.5, 1],
|
||||
['#3b82f6', '#8b5cf6', '#ec4899']
|
||||
["#3b82f6", "#8b5cf6", "#ec4899"],
|
||||
);
|
||||
|
||||
return (
|
||||
@@ -180,13 +177,13 @@ function HorizontalScroll({ items }) {
|
||||
const containerRef = useRef(null);
|
||||
const { scrollYProgress } = useScroll({
|
||||
target: containerRef,
|
||||
offset: ['start start', 'end end'],
|
||||
offset: ["start start", "end end"],
|
||||
});
|
||||
|
||||
const x = useTransform(
|
||||
scrollYProgress,
|
||||
[0, 1],
|
||||
['0%', `-${(items.length - 1) * 100}%`]
|
||||
["0%", `-${(items.length - 1) * 100}%`],
|
||||
);
|
||||
|
||||
return (
|
||||
@@ -239,7 +236,7 @@ function StaggeredList({ items }) {
|
||||
```tsx
|
||||
function TextReveal({ text }) {
|
||||
const [ref, isInView] = useInView({ threshold: 0.5, triggerOnce: true });
|
||||
const words = text.split(' ');
|
||||
const words = text.split(" ");
|
||||
|
||||
return (
|
||||
<p ref={ref} className="text-4xl font-bold">
|
||||
@@ -268,8 +265,8 @@ function ClipReveal({ children }) {
|
||||
return (
|
||||
<motion.div
|
||||
ref={ref}
|
||||
initial={{ clipPath: 'inset(0 100% 0 0)' }}
|
||||
animate={isInView ? { clipPath: 'inset(0 0% 0 0)' } : {}}
|
||||
initial={{ clipPath: "inset(0 100% 0 0)" }}
|
||||
animate={isInView ? { clipPath: "inset(0 0% 0 0)" } : {}}
|
||||
transition={{ duration: 0.8, ease: [0.16, 1, 0.3, 1] }}
|
||||
>
|
||||
{children}
|
||||
@@ -285,7 +282,7 @@ function StickySection({ title, content, image }) {
|
||||
const ref = useRef(null);
|
||||
const { scrollYProgress } = useScroll({
|
||||
target: ref,
|
||||
offset: ['start start', 'end start'],
|
||||
offset: ["start start", "end start"],
|
||||
});
|
||||
|
||||
const opacity = useTransform(scrollYProgress, [0, 0.5, 1], [1, 1, 0]);
|
||||
@@ -373,7 +370,10 @@ function FullPageScroll({ sections }) {
|
||||
return (
|
||||
<div className="snap-container">
|
||||
{sections.map((section, i) => (
|
||||
<section key={i} className="snap-section flex items-center justify-center">
|
||||
<section
|
||||
key={i}
|
||||
className="snap-section flex items-center justify-center"
|
||||
>
|
||||
{section}
|
||||
</section>
|
||||
))}
|
||||
@@ -403,14 +403,14 @@ function useThrottledScroll(callback, delay = 16) {
|
||||
}
|
||||
};
|
||||
|
||||
window.addEventListener('scroll', handler, { passive: true });
|
||||
return () => window.removeEventListener('scroll', handler);
|
||||
window.addEventListener("scroll", handler, { passive: true });
|
||||
return () => window.removeEventListener("scroll", handler);
|
||||
}, [callback, delay]);
|
||||
}
|
||||
|
||||
// Use transform instead of top/left
|
||||
// Good
|
||||
const goodAnimation = { transform: 'translateY(100px)' };
|
||||
const goodAnimation = { transform: "translateY(100px)" };
|
||||
// Bad (causes reflow)
|
||||
const badAnimation = { top: '100px' };
|
||||
const badAnimation = { top: "100px" };
|
||||
```
|
||||
|
||||
Reference in New Issue
Block a user