Fizens Mobile Animation Patterns

Reference patterns extracted from Fizens Finance SaaS Template for reuse in mobile-first dark-theme websites.

Core Architecture

1. Scroll-Reveal Hook (IntersectionObserver)

Lightweight React hook that triggers CSS class changes when elements enter the viewport. Desktop auto-bypass at ≥1024px.

// src/hooks/useScrollReveal.ts
import { useEffect, useRef, useState, useCallback } from 'react';

interface ScrollRevealOptions {
  threshold?: number;      // 0–1, default 0.15
  rootMargin?: string;     // default '0px 0px -60px 0px'
  once?: boolean;          // default true
}

export function useScrollReveal<T extends HTMLElement = HTMLDivElement>(
  options: ScrollRevealOptions = {}
): [React.RefObject<T | null>, boolean] {
  const { threshold = 0.15, rootMargin = '0px 0px -60px 0px', once = true } = options;
  const ref = useRef<T | null>(null);
  const [isVisible, setIsVisible] = useState(false);
  const hasTriggered = useRef(false);

  const handleIntersect = useCallback((entries: IntersectionObserverEntry[]) => {
    const entry = entries[0];
    if (entry.isIntersecting) {
      setIsVisible(true);
      if (once) hasTriggered.current = true;
    } else if (!once && !hasTriggered.current) {
      setIsVisible(false);
    }
  }, [once]);

  useEffect(() => {
    const el = ref.current;
    if (!el) return;
    // Skip on desktop — mobile-only animations
    if (window.innerWidth >= 1024) { setIsVisible(true); return; }
    const observer = new IntersectionObserver(handleIntersect, { threshold, rootMargin });
    observer.observe(el);
    return () => observer.disconnect();
  }, [threshold, rootMargin, handleIntersect]);

  return [ref, isVisible];
}

Core Architecture

1. Scroll-Reveal Hook (IntersectionObserver)

Lightweight React hook that triggers CSS class changes when elements enter the viewport. Desktop auto-bypass at ≥1024px.

// src/hooks/useScrollReveal.ts import { useEffect, useRef, useState, useCallback } from 'react'; interface ScrollRevealOptions { threshold?: number; // 0–1, default 0.15 rootMargin?: string; // default '0px 0px -60px 0px' once?: boolean; // default true } export function useScrollReveal<T extends HTMLElement = HTMLDivElement>( options: ScrollRevealOptions = {} ): [React.RefObject<T | null>, boolean] { const { threshold = 0.15, rootMargin = '0px 0px -60px 0px', once = true } = options; const ref = useRef<T | null>(null); const [isVisible, setIsVisible] = useState(false); const hasTriggered = useRef(false); const handleIntersect = useCallback((entries: IntersectionObserverEntry[]) => { const entry = entries[0]; if (entry.isIntersecting) { setIsVisible(true); if (once) hasTriggered.current = true; } else if (!once && !hasTriggered.current) { setIsVisible(false); } }, [once]); useEffect(() => { const el = ref.current; if (!el) return; // Skip on desktop — mobile-only animations if (window.innerWidth >= 1024) { setIsVisible(true); return; } const observer = new IntersectionObserver(handleIntersect, { threshold, rootMargin }); observer.observe(el); return () => observer.disconnect(); }, [threshold, rootMargin, handleIntersect]); return [ref, isVisible]; }

Animation Type	Duration	Delay Between Items
Fade-up entrance	600–800ms	100–150ms stagger
Scale entrance	500–700ms	80–120ms stagger
Float/bob loop	2.5–3.5s	0.3s offset per icon
Glow pulse	2–3s	N/A (continuous)
Tap feedback	100–150ms	N/A
Nav link cascade	400ms	50ms per link

Fizens Mobile Animations

Fizens Mobile Animation Patterns

Core Architecture

1. Scroll-Reveal Hook (IntersectionObserver)

Fizens Mobile Animations

Fizens Mobile Animation Patterns

Core Architecture

1. Scroll-Reveal Hook (IntersectionObserver)

Animation Patterns

2. Fade-Up Entrance (Slide + Fade)

3. Staggered Entrance

4. Scale Entrance Variant

5. Floating / Breathing Animation

6. CTA Glow Pulse

7. Spring-Like Carousel Transitions

8. Mobile Nav Link Cascade

9. Mobile Tap Feedback

10. Desktop Override

Design Principles

Dark Theme Adaptation

Animation Timing Guidelines

Performance Notes

Liquid Glass Design

Compose Multiplatform Patterns

Foundation Models On Device

Swiftui Patterns

Foundation Models On Device

Swiftui Patterns