Skip to content

REACTBITS_INTEGRATION.md

Latest commit

 

History

History
369 lines (281 loc) · 10 KB

REACTBITS_INTEGRATION.md

File metadata and controls

369 lines (281 loc) · 10 KB
Raw

React Bits Integration Documentation

This document provides a comprehensive overview of how React Bits components are integrated into the Monynha Softwares corporate website.

Overview

React Bits is a library of animated components that offers backgrounds, interactive cards, animated menus, and text effects. This project uses a curated selection of React Bits components to create an immersive and engaging user experience while maintaining excellent performance and accessibility.

Performance Guidelines

Following React Bits best practices:

  • Maximum 2-3 components per page to preserve performance
  • Fallback alternatives for prefers-reduced-motion users
  • Mobile optimizations to reduce animation overhead on smaller devices

Components Catalog

Background Components

1. LiquidEtherBackground

Location: src/components/reactbits/LiquidEtherBackground.tsx

Usage:

  • Home Page Hero - Main background animation

Features:

  • WebGL-based fluid animation
  • Purple/blue gradient matching brand colors
  • Automatic fallback to static gradient for prefers-reduced-motion
  • Optimized rendering with Three.js

Props:

// Uses default configuration, no props needed
<LiquidEtherBackground />

2. RippleGridBackground

Location: src/components/reactbits/RippleGridBackground.tsx

Usage:

  • Contact Page - Background behind contact form

Features:

  • Animated grid with ripple effects
  • Subtle and non-distracting
  • Complements form content

Text Animation Components

3. SplitText

Location: src/components/reactbits/SplitText.tsx

Usage:

  • Home Page - Main hero title "Monynha Softwares / Inclusive tech that empowers"

Features:

  • Word-by-word text reveal.
  • Stagger delay for smooth animation
  • Configurable tag (h1, h2, etc.)

Props Example:

<SplitText
  as="h1"
  text={["Monynha Softwares", "Inclusive tech that empowers"].join("\n")}
  className="mb-6 text-[clamp(2.25rem,8vw,3.75rem)] font-bold leading-[1.1] break-words text-balance items-center"
/>

4. TextType

Location: src/components/reactbits/TextType.tsx

Usage:

  • About Page - Biography paragraphs

Features:

  • Typewriter effect
  • Configurable delay and speed
  • Multiple instances can run with different delays

Props Example:

<TextType
  className="text-[clamp(1rem,3.3vw,1.1rem)] leading-relaxed"
  text="I'm a digital artist and creative developer..."
  delay={0}
/>

Card Components

5. PixelCard

Location: src/components/reactbits/PixelCard.tsx

Usage:

  • Home Page - Featured repositories grid
  • Repositories Page - Individual repository cards

Features:

  • Pixelated hover effect
  • Image display with title/subtitle
  • Optional footer content
  • Mobile-friendly with noFocus prop

Props Example:

<PixelCard
  imageUrl={repo.imageUrl}
  title={repo.name}
  subtitle={repo.description ?? "No description provided."}
  footer={<span className="text-sm">{repo.language}</span>}
/>

Gallery Components

6. RollingGallery

Location: src/components/reactbits/RollingGallery.tsx

Usage:

  • Optional horizontal carousel for future highlights (currently not used in any page)

Features:

  • Smooth horizontal scrolling
  • Configurable speed
  • Responsive item sizing
  • Supports title, subtitle, and footer for each item

Props Example:

<RollingGallery
  items={featured.map((item) => ({
    id: item.id,
    title: item.name,
    subtitle: item.subtitle,
    imageUrl: item.imageUrl,
    href: item.href,
  }))}
  speed={24}
/>

7. SpotlightCard

Location: src/components/reactbits/SpotlightCard.tsx

Usage:

  • Optional highlight cards for future landing sections (currently not used in any page)

Features:

  • Spotlight effect following cursor
  • Interactive hover states
  • Customizable spotlight color

Props Example:

<SpotlightCard className="bg-surface-3/90 p-6 sm:p-8">
  <div className="flex flex-col gap-3">
    <div className="inline-flex h-14 w-14 items-center justify-center rounded-2xl bg-primary/10">
      <Sparkles className="h-7 w-7" />
    </div>
    <h3>Software Development</h3>
    <p>Building robust, scalable applications</p>
  </div>
</SpotlightCard>

Navigation Components

8. GooeyNav

Location: src/components/reactbits/GooeyNav.tsx

Usage:

  • Navigation Component - Main site navigation (desktop and mobile)
  • Wrapped in src/components/Navigation.tsx

Features:

  • Gooey morphing effect between states
  • Responsive mobile hamburger menu
  • Keyboard navigation support
  • Focus trap for accessibility
  • Integration with FlowingMenu for mobile drawer

Key Features:

  • Desktop: Horizontal navigation bar with animated hover states
  • Mobile: Hamburger menu opening FlowingMenu drawer
  • Accessibility: Full keyboard navigation, ARIA labels, focus management

9. FlowingMenu

Location: src/components/reactbits/FlowingMenu.tsx

Usage:

  • GooeyNav Mobile Menu - Used as the mobile drawer menu

Features:

  • Animated marquee on hover
  • Directional entrance/exit animations based on cursor position
  • Active state highlighting
  • GSAP-powered smooth animations
  • Reduced motion support

UI Enhancement Components

10. GlassIcon

Location: src/components/reactbits/GlassIcon.tsx

Usage:

  • Contact Page - Email and Instagram contact cards
  • Repository Detail Page - Repository metadata display (stars, forks, language, etc.)

Features:

  • Glassmorphism effect
  • Icon with title and description
  • Optional href for links
  • Hover animations

Props Example:

<GlassIcon
  icon={<Mail className="h-6 w-6" />}
  title="Email"
  description="contact@monynha.com"
  href="mailto:contact@monynha.com"
/>

11. StepperTimeline

Location: src/components/reactbits/StepperTimeline.tsx

Usage:

  • About Page - Experience and timeline section

Features:

  • Vertical timeline with indicators
  • Step titles, subtitles, and descriptions
  • Progress line connecting steps
  • Responsive layout

Props Example:

<StepperTimeline
  steps={experiences.map((ex) => ({
    title: ex.role,
    subtitle: `${ex.organization} · ${ex.location}`,
    description: ex.highlights.join(' • '),
    indicator: ex.year.toString(),
  }))}
/>

Page-by-Page Breakdown

Home Page (src/pages/Home.tsx)

React Bits Components Used: 3

  1. LiquidEtherBackground - Hero background
  2. SplitText - Main title animation
  3. PixelCard - Featured repository cards

Performance: Within 2-3 component guideline (background + text + cards count as 3)

About Page (src/pages/About.tsx)

React Bits Components Used: 2

  1. TextType - Biography text (multiple instances)
  2. StepperTimeline - Experience timeline

Performance: Within guideline

Contact Page (src/pages/Contact.tsx)

React Bits Components Used: 2

  1. RippleGridBackground - Form background
  2. GlassIcon - Contact method cards

Performance: Within guideline

Repositories Page (src/pages/Repositories.tsx)

React Bits Components Used: 1

  1. PixelCard - Repository list items

Performance: Well within guideline

Repository Detail Page (src/pages/RepositoryDetail.tsx)

React Bits Components Used: 1

  1. GlassIcon - Repository metadata display (stars, forks, language, etc.)

Performance: Well within guideline

Navigation (All Pages)

React Bits Components Used: 2

  1. GooeyNav - Main navigation component
  2. FlowingMenu - Mobile menu drawer (nested in GooeyNav)

Performance: Shared across all pages, optimized for performance

Accessibility Features

All React Bits components in this project include:

  1. Reduced Motion Support

    • Check for prefers-reduced-motion media query
    • Provide static fallbacks
    • Example: LiquidEtherBackground shows static gradient

  2. Keyboard Navigation

    • All interactive components support keyboard
    • Focus indicators visible
    • Tab order logical

  3. ARIA Labels

    • Proper labeling for screen readers
    • Role attributes where appropriate
    • Semantic HTML structure

  4. Color Contrast

    • Meets WCAG AA standards
    • Text readable against animated backgrounds
    • Focus states clearly visible

Mobile Optimizations

  1. Touch-friendly targets - All interactive elements minimum 44x44px
  2. Reduced animations - Some effects disabled on mobile for performance
  3. Responsive layouts - All components adapt to smaller screens
  4. Performance monitoring - Animation frames optimized for 60fps

Development Guidelines

Adding New React Bits Components

  1. Check the 2-3 component limit per page
  2. Add reduced motion fallback: 
    const prefersReducedMotion = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
if (prefersReducedMotion) {
  return <StaticFallback />;
}
  3. Test on mobile devices
  4. Document in this file

Testing Checklist

  • Works with keyboard navigation
  • Respects prefers-reduced-motion
  • Performs well on mobile (60fps)
  • No console errors or warnings
  • Accessible to screen readers

Future Enhancements

Potential React Bits components to consider:

  • Aurora Background - Alternative to LiquidEther/Silk
  • Particles Background - Optional atmospheric backgrounds
  • Decay Card - Alternative card style
  • Gradient Text - Alternative to SplitText
  • Scroll Float - Enhanced scroll indicators

Remember to maintain the 2-3 components per page limit when adding new components.

Resources

Conclusion

The React Bits integration in Monynha Softwares provides a sophisticated, performant, and accessible user experience. The careful selection and placement of components ensures visual impact without sacrificing performance or usability.