React Native Expo website with quantum-driven animations and team showcase.
For Quantum Game Jam 2025, I built a complete React Native Expo web application to showcase our team's work and host the game outside of itch.io. The website demonstrates production-ready web development with advanced animations, responsive design, and sophisticated UI components—all built with modern React Native and TypeScript.
The site features custom parallax scrolling with three-layer depth effects, where background elements move at different speeds to create an illusion of 3D space. I implemented quantum-themed animations using React Native Reanimated 4, including rotating icons whose behavior is controlled by real-time API calls to an external quantum server. These animations run at 60fps on the UI thread using shared values and worklets. I configured NativeWind (Tailwind CSS for React Native) with a custom quantum-inspired color palette featuring deep purples, electric blues, and neon accents.
The team showcase section features animated collapsible cards with gradient borders, smooth expand/collapse transitions, and rich content including profiles, GitHub links, and role descriptions. I embedded the Godot game directly in the website using an iframe with responsive sizing. Built with expo-router for navigation and fully responsive across desktop and mobile, this project showcases my ability to create polished web applications with cutting-edge animation techniques and clean component architecture.
React Native Reanimated 4 Animations
60fps animations running on UI thread with shared values
I implemented sophisticated animations using React Native Reanimated 4, leveraging shared values and worklets to run animations on the UI thread at 60fps without blocking JavaScript. The quantum icon component features dynamic rotation patterns that cycle between orbital (360° loops) and oscillation (back-and-forth) motions. I used withRepeat, withSequence, and withTiming to create complex animation chains with configurable durations and cycle counts. The animations are triggered by external API calls that return measurement values, which I map to rotation intensity (20-60°) and repetition counts (15-30 cycles). The implementation demonstrates advanced React Native performance optimization—all animation logic runs natively using worklets, avoiding the JavaScript bridge overhead that typically causes janky animations.
import Animated, { useSharedValue, withRepeat, withSequence, withTiming } from 'react-native-reanimated';
const QuantumIcon = () => {
const rotation = useSharedValue(0);
const [icon, setIcon] = useState('⚛️');
const startAnimation = async () => {
try {
const response = await fetch('API_URL', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ gate_type: 'rotation', rotation_angle: Math.random() * Math.PI })
});
const { measurement, superposition_strength } = await response.json();
// Map quantum values to animation parameters
const intensity = 20 + (superposition_strength * 40); // 20° to 60°
const cycles = Math.floor(15 + (superposition_strength * 15)); // 15-30
if (measurement === 0) {
// Orbital pattern
rotation.value = withRepeat(
withSequence(
withTiming(360, { duration: 2000 }),
withTiming(0, { duration: 0 })
),
cycles
);
setIcon('⭐');
} else {
// Oscillation pattern
rotation.value = withRepeat(
withSequence(
withTiming(intensity, { duration: 1000 }),
withTiming(-intensity, { duration: 1000 })
),
cycles
);
setIcon('🌌');
}
} catch (error) {
console.error('API error:', error);
}
};
return (
<Animated.View style={{ transform: [{ rotate: `${rotation.value}deg` }] }}>
<Text style={{ fontSize: 48 }}>{icon}</Text>
</Animated.View>
);
};
Custom Parallax Scrolling System
Three-layer depth effects with ScrollView integration
I built custom parallax scrolling components that create stunning 3D depth effects. The ParallaxScrollView implements three animated layers: a slow-moving background (0.3x scroll speed), medium-speed middle layer (0.6x), and fast-moving foreground particles (1.2x). Each layer's position is calculated based on ScrollView's onScroll event using Animated.event for native-driven animations. The system uses Animated.multiply and Animated.divide to compute parallax offsets without blocking the JavaScript thread. I also created an AdvancedParallaxScrollView with an animated grid background and floating quantum particles that move independently. The parallax effects add professional polish and make the site feel dynamic rather than static, demonstrating my understanding of scroll-driven animations and performance optimization in React Native.
Animated Team Showcase Cards
Collapsible components with measured heights and smooth transitions
I designed animated collapsible cards for the team showcase using React Native Reanimated's measured height system. Each card starts collapsed, showing only the member's name, role, and avatar. When tapped, the card smoothly expands to reveal their full bio, portfolio links, and GitHub profile. I implemented this using useSharedValue for height, measuring the content's natural height with onLayout, then animating between 0 and the measured value using withTiming. The gradient borders are created with LinearGradient components, and I added staggered animations so cards expand in sequence rather than all at once. The cards include profile images loaded with expo-image for optimization, clickable links using Pressable components, and responsive layouts that adapt to screen width. This demonstrates my ability to create polished, interactive UI components with smooth animations.
Embedded Godot Game Integration
Responsive iframe with proper aspect ratio and fallback
I created a section to embed the Godot game directly within the website using platform-specific rendering. On web, I use an iframe with responsive sizing that maintains 16:9 aspect ratio using Dimensions API. On mobile (if deployed natively), it falls back to WebView for better performance. The implementation includes loading states, error handling for when the game fails to load, and instructions displayed above the game. I configured the iframe to allow fullscreen mode and handle touch events properly. The embedded game section also includes controls explanation and a link to the full version on itch.io. This integration demonstrates my ability to seamlessly embed third-party content into React Native applications while maintaining responsive design.
NativeWind Configuration & Custom Theme
Tailwind CSS utility-first styling for React Native
I configured NativeWind (Tailwind CSS for React Native) to enable utility-first styling throughout the website. I extended the default Tailwind config with a custom quantum-inspired color palette: deep purples (#6B46C1, #7C3AED), electric blues (#3B82F6, #60A5FA), neon accents (#A78BFA, #C084FC), and dark backgrounds (#0F172A, #1E293B). I also added custom spacing values, animation utilities, and responsive breakpoints specific to our design. NativeWind allowed me to rapidly prototype layouts using className utilities like 'flex-row justify-center items-center p-4 bg-purple-900', while still maintaining native performance. I combined NativeWind utilities with StyleSheet for performance-critical animations, showing understanding of when to use each approach. The system supports both light and dark modes, though the quantum theme works best with dark backgrounds.