Apple UI Design Demo

Glassmorphism

``` -------------------------------- ### Implement iOS-like Motion and Staggered Animations Source: https://context7.com/tamoza4/apple-ui-design/llms.txt Defines custom cubic-bezier easing curves and transition timings to mimic iOS motion. Includes keyframes for fade-in animations and staggered reveal logic for UI elements like hero sections and card grids. ```css :root { --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1); --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1); --ease-in-out-quart: cubic-bezier(0.76, 0, 0.24, 1); --duration-fast: 200ms; --duration-normal: 300ms; } .interactive { transition: transform var(--duration-fast) var(--ease-out-expo), box-shadow var(--duration-fast) var(--ease-out-expo), background-color var(--duration-fast) var(--ease-out-expo); } @keyframes fadeInUp { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } } .card-grid .card:nth-child(1) { transition-delay: 0ms; } .card-grid .card:nth-child(2) { transition-delay: 50ms; } .card-grid .card:nth-child(3) { transition-delay: 100ms; } .card-grid .card:nth-child(4) { transition-delay: 150ms; } ``` -------------------------------- ### Create Apple-Style Button Components Source: https://context7.com/tamoza4/apple-ui-design/llms.txt Provides a base button structure with variants for primary, secondary, and ghost styles. Includes hover, active, and focus-visible states to ensure accessibility and tactile feedback. ```css .button { display: inline-flex; align-items: center; justify-content: center; height: 48px; padding: 0 24px; border-radius: 12px; cursor: pointer; transition: transform 200ms cubic-bezier(0.16, 1, 0.3, 1), background-color 200ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 200ms cubic-bezier(0.16, 1, 0.3, 1); } .button-primary { background-color: #007aff; color: #ffffff; border: none; } .button:focus-visible { outline: 2px solid #007aff; outline-offset: 2px; } ``` -------------------------------- ### Implement 8pt Grid System in CSS Source: https://context7.com/tamoza4/apple-ui-design/llms.txt Defines layout dimensions using the 8pt grid system to ensure consistent spacing and sizing. It covers containers, cards, and buttons, with specific exemptions for fine visual details. ```css .container { padding: 24px; margin: 16px; gap: 32px; border-radius: 16px; } .card { padding: 24px 32px; margin-bottom: 16px; width: 320px; min-height: 240px; } .button { height: 48px; padding: 0 24px; border-radius: 12px; border-width: 1px; } .input:focus { outline-offset: 2px; } .headline { letter-spacing: -0.02em; } ``` -------------------------------- ### Input Component Styling (CSS) Source: https://context7.com/tamoza4/apple-ui-design/llms.txt Defines the base styles for input fields, including height, padding, border, background, font properties, and transitions for focus states. It also includes styles for placeholders and hover effects, ensuring a clean and accessible user experience. ```css /* Apple UI Design System – Verified: 8pt, glassmorphism, SF fonts, natural motion */ .input { height: 48px; padding: 0 16px; border-radius: 12px; border: 1px solid rgba(0, 0, 0, 0.12); background: rgba(255, 255, 255, 0.8); font-family: var(--font-text); font-size: 17px; color: var(--text-primary); transition: border-color 200ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 200ms cubic-bezier(0.16, 1, 0.3, 1); } .input::placeholder { color: var(--text-tertiary); } .input:hover { border-color: rgba(0, 0, 0, 0.2); } .input:focus { outline: none; border-color: #007aff; box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.2); } /* Input with Label */ .input-group { display: flex; flex-direction: column; gap: 8px; } .input-label { font-family: var(--font-text); font-size: 15px; font-weight: 500; color: var(--text-primary); } /* Textarea */ .textarea { min-height: 120px; padding: 16px; resize: vertical; } /* Dark Mode Inputs */ @media (prefers-color-scheme: dark) { .input { background: rgba(44, 44, 46, 0.8); border-color: rgba(255, 255, 255, 0.16); color: var(--text-primary); } .input:hover { border-color: rgba(255, 255, 255, 0.24); } } ``` -------------------------------- ### Define Apple System Typography in CSS Source: https://context7.com/tamoza4/apple-ui-design/llms.txt Sets up CSS variables and typography styles for Apple's SF Pro fonts. It includes specific letter-spacing and line-height adjustments to match the signature Apple aesthetic for headings and body text. ```css :root { --font-display: 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-text: 'SF Pro Text', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; } h1 { font-family: var(--font-display); font-size: 56px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; } h2 { font-family: var(--font-display); font-size: 40px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.2; } h3 { font-family: var(--font-display); font-size: 24px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.3; } body { font-family: var(--font-text); font-size: 17px; font-weight: 400; line-height: 1.5; } .caption { font-family: var(--font-text); font-size: 12px; color: var(--text-secondary); } ``` -------------------------------- ### React Staggered Animation Hook for Sequential Effects Source: https://context7.com/tamoza4/apple-ui-design/llms.txt A custom React hook, useStaggeredAnimation, designed to apply staggered entrance animations to elements. It uses `useState`, `useEffect`, and `useRef` to control opacity and transform properties, creating a natural motion effect based on an element's index and a configurable delay. ```tsx // Staggered Animation Hook export const useStaggeredAnimation = (index: number, delay: number = 50) => { const [isVisible, setIsVisible] = useState(false); const ref = useRef(null); useEffect(() => { const timer = setTimeout(() => setIsVisible(true), index * delay); return () => clearTimeout(timer); }, [index, delay]); return { ref, style: { opacity: isVisible ? 1 : 0, transform: isVisible ? 'translateY(0)' : 'translateY(24px)', transition: `all 300ms ${styles.easing}`, }, }; }; ``` -------------------------------- ### Define Light Mode Color Palette Source: https://context7.com/tamoza4/apple-ui-design/llms.txt Sets up CSS variables for the default Light Mode, utilizing warm-gray backgrounds, translucent borders, and high-contrast text colors to maintain Apple's design aesthetic. ```css :root { --background-primary: #fbfbfd; --background-secondary: rgba(255, 255, 255, 0.72); --surface-elevated: rgba(255, 255, 255, 0.8); --text-primary: #1d1d1f; --text-secondary: #86868b; --text-tertiary: #6e6e73; --accent-blue: #007aff; --accent-blue-hover: #0066d6; --border-subtle: rgba(0, 0, 0, 0.08); --border-card: rgba(0, 0, 0, 0.04); --border-input: rgba(0, 0, 0, 0.12); --shadow-card: 0 2px 8px rgba(0, 0, 0, 0.04); --shadow-elevated: 0 4px 16px rgba(0, 0, 0, 0.08); } body { background-color: var(--background-primary); color: var(--text-primary); } ``` -------------------------------- ### React Dashboard Layout with Custom Components Source: https://context7.com/tamoza4/apple-ui-design/llms.txt This React component defines the structure for a dashboard page. It includes a navigation bar, a main content area with a hero section displaying a welcome message, and a section for quick actions using custom 'GlassCard' and 'AppleButton' components. Styling is applied inline and through imported 'styles'. ```jsx import React from 'react'; import styles from './styles'; // Assuming styles are imported from a local file // Mock components for demonstration purposes const GlassCard = ({ children }) => (

{children}

); const AppleButton = ({ children }) => ( ); const heroAnimation = {}; // Placeholder for animation props const cardAnimation = {}; // Placeholder for animation props const Dashboard = () => { return (

{/* Content */}

Welcome Back

Quick Actions

Get Started

); }; export default Dashboard; ``` -------------------------------- ### React Glass Card Component with Apple UI Styles Source: https://context7.com/tamoza4/apple-ui-design/llms.txt Implements a reusable GlassCard component in React with TypeScript, applying Apple's design system principles. It includes glassmorphism effects, 8pt spacing, SF fonts, and subtle hover animations for an interactive and visually appealing card. ```tsx // Apple UI Design System – Verified: 8pt, glassmorphism, SF fonts, natural motion import React, { useState, useEffect, useRef } from 'react'; // CSS-in-JS styles following Apple guidelines const styles = { // 8pt grid system values spacing: { xs: '8px', sm: '16px', md: '24px', lg: '32px', xl: '48px', }, // Apple system fonts fonts: { display: "'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif", text: "'SF Pro Text', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif", }, // Light mode colors colors: { background: '#fbfbfd', surface: 'rgba(255, 255, 255, 0.8)', border: 'rgba(0, 0, 0, 0.08)', accent: '#007aff', textPrimary: '#1d1d1f', textSecondary: '#86868b', }, // Custom easing easing: 'cubic-bezier(0.16, 1, 0.3, 1)', }; // Glass Card Component interface GlassCardProps { children: React.ReactNode; className?: string; } export const GlassCard: React.FC = ({ children, className }) => { const [isHovered, setIsHovered] = useState(false); return (

setIsHovered(true)} onMouseLeave={() => setIsHovered(false)} style={{ padding: styles.spacing.md, background: styles.colors.surface, backdropFilter: 'blur(24px) saturate(180%)', WebkitBackdropFilter: 'blur(24px) saturate(180%)', borderRadius: '16px', border: `1px solid ${styles.colors.border}`, boxShadow: isHovered ? '0 8px 24px rgba(0, 0, 0, 0.08)' : '0 2px 8px rgba(0, 0, 0, 0.04)', transform: isHovered ? 'translateY(-4px) scale(1.02)' : 'none', transition: `all 200ms ${styles.easing}`, cursor: 'pointer', }} > {children}

); }; ``` -------------------------------- ### SwiftUI Apple Button with Spring Animation Source: https://context7.com/tamoza4/apple-ui-design/llms.txt A customizable SwiftUI Button styled to resemble Apple's default button appearance, featuring a blue background, white text, and rounded corners. It incorporates a `ScaleButtonStyle` to provide a subtle scaling effect with spring animation when pressed. Dependencies include SwiftUI framework. ```swift // MARK: - Primary Button struct AppleButton: View { let title: String let action: () -> Void @State private var isPressed = false var body: some View { Button(action: action) { Text(title) .font(.system(size: 17, weight: .medium)) .frame(height: 48) .padding(.horizontal, 24) .background(Color.blue) .foregroundColor(.white) .clipShape(RoundedRectangle(cornerRadius: 12)) } .buttonStyle(ScaleButtonStyle()) } } // MARK: - Scale Button Style with Spring Animation struct ScaleButtonStyle: ButtonStyle { func makeBody(configuration: Configuration) -> some View { configuration.label .scaleEffect(configuration.isPressed ? 0.98 : 1.0) .animation(.spring(response: 0.2, dampingFraction: 0.8), value: configuration.isPressed) } } ``` -------------------------------- ### SwiftUI Glass Card Component Source: https://context7.com/tamoza4/apple-ui-design/llms.txt A reusable SwiftUI View that creates a glassmorphic card effect using `.ultraThinMaterial` background, rounded corners, and subtle shadow. It accepts generic content to be displayed within the card. Dependencies include SwiftUI framework. ```swift // Apple UI Design System – Verified: 8pt, glassmorphism, SF fonts, natural motion import SwiftUI // MARK: - Glass Card Component struct GlassCard: View { let content: Content init(@ViewBuilder content: () -> Content) { self.content = content() } var body: some View { content .padding(24) .background(.ultraThinMaterial) .clipShape(RoundedRectangle(cornerRadius: 16)) .overlay( RoundedRectangle(cornerRadius: 16) .stroke(Color.primary.opacity(0.04), lineWidth: 1) ) .shadow(color: .black.opacity(0.04), radius: 8, y: 2) } } ``` -------------------------------- ### React Apple Button Component with Variants and Animations Source: https://context7.com/tamoza4/apple-ui-design/llms.txt Provides a customizable AppleButton component in React using TypeScript, supporting primary, secondary, and ghost variants. It incorporates press animations and adheres to Apple's visual style, including custom easing and system fonts. ```tsx // Apple Button Component interface AppleButtonProps { children: React.ReactNode; variant?: 'primary' | 'secondary' | 'ghost'; onClick?: () => void; } export const AppleButton: React.FC = ({ children, variant = 'primary', onClick }) => { const [isPressed, setIsPressed] = useState(false); const baseStyles: React.CSSProperties = { display: 'inline-flex', alignItems: 'center', justifyContent: 'center', height: '48px', padding: '0 24px', borderRadius: '12px', fontFamily: styles.fonts.text, fontSize: '17px', fontWeight: 500, cursor: 'pointer', border: 'none', transform: isPressed ? 'scale(0.98)' : 'scale(1)', transition: `all 200ms ${styles.easing}`, }; const variantStyles: Record = { primary: { background: styles.colors.accent, color: '#ffffff', }, secondary: { background: 'rgba(0, 122, 255, 0.1)', color: styles.colors.accent, border: '1px solid rgba(0, 122, 255, 0.2)', }, ghost: { background: 'transparent', color: styles.colors.accent, border: `1px solid ${styles.colors.border}`, }, }; return ( ); }; ``` -------------------------------- ### SwiftUI Glass Navigation Bar Source: https://context7.com/tamoza4/apple-ui-design/llms.txt A SwiftUI View for creating a navigation bar with a glassmorphic appearance using `.ultraThinMaterial` background and a subtle bottom border. It displays a title with adjusted font and letter-spacing. Dependencies include SwiftUI framework. ```swift // MARK: - Glass Navigation Bar struct GlassNavBar: View { let title: String var body: some View { HStack { Text(title) .font(.system(size: 24, weight: .semibold)) .tracking(-0.5) // Negative letter-spacing Spacer() } .padding(.horizontal, 24) .frame(height: 64) .background(.ultraThinMaterial) .overlay( Rectangle() .frame(height: 1) .foregroundColor(.primary.opacity(0.08)), alignment: .bottom ) } } ``` -------------------------------- ### Scroll-Triggered Card Reveals with JavaScript Source: https://context7.com/tamoza4/apple-ui-design/llms.txt This JavaScript code implements a scroll-triggered staggered reveal animation for card elements. It uses the Intersection Observer API to detect when cards enter the viewport and applies a CSS transition for a smooth fade-in and slide-up effect. The staggering is achieved using a `setTimeout` based on the card's index. ```javascript // Apple UI Design System – Verified: 8pt, glassmorphism, SF fonts, natural motion const cards = document.querySelectorAll('.card'); const observer = new IntersectionObserver((entries) => { entries.forEach((entry, index) => { if (entry.isIntersecting) { setTimeout(() => { entry.target.classList.add('visible'); entry.target.style.transition = `opacity 300ms cubic-bezier(0.16, 1, 0.3, 1), transform 300ms cubic-bezier(0.16, 1, 0.3, 1)`; }, index * 50); } }); }, { threshold: 0.1 }); cards.forEach(card => observer.observe(card)); ``` -------------------------------- ### Define Dark Mode Color Palette Source: https://context7.com/tamoza4/apple-ui-design/llms.txt Configures CSS variables for Dark Mode using a media query, ensuring high contrast and appropriate translucency for dark backgrounds. ```css @media (prefers-color-scheme: dark) { :root { --background-primary: #000000; --background-secondary: rgba(28, 28, 30, 0.72); --surface-elevated: rgba(44, 44, 46, 0.8); --text-primary: #f5f5f7; --text-secondary: #a1a1a6; --text-tertiary: #8e8e93; --accent-blue: #0a84ff; --accent-blue-hover: #409cff; --border-subtle: rgba(255, 255, 255, 0.08); --border-card: rgba(255, 255, 255, 0.04); --border-input: rgba(255, 255, 255, 0.16); --shadow-card: 0 2px 8px rgba(0, 0, 0, 0.32); --shadow-elevated: 0 4px 16px rgba(0, 0, 0, 0.48); } } ``` -------------------------------- ### SwiftUI Staggered Animation Modifier Source: https://context7.com/tamoza4/apple-ui-design/llms.txt A SwiftUI `ViewModifier` that applies a staggered fade-in and slide-up animation to content based on its index. The animation uses a spring effect with a delay proportional to the item's index, creating a sequential appearance. Dependencies include SwiftUI framework. ```swift // MARK: - Staggered Animation Modifier struct StaggeredAnimation: ViewModifier { let index: Int @State private var isVisible = false func body(content: Content) -> some View { content .opacity(isVisible ? 1 : 0) .offset(y: isVisible ? 0 : 24) .onAppear { withAnimation( .spring(response: 0.3, dampingFraction: 0.8) .delay(Double(index) * 0.05) ) { isVisible = true } } } } ``` === COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.