Core Concepts
Understanding transitions, decorators, and screens in Flemo
Flemo brings native app-like transitions to the web. Our three core concepts - Screen, Transition, and Decorator - work together to create seamless, performant navigation experiences.
Screen
The Screen component is the foundation of Flemo. Every page component must be wrapped with Screen to enable smooth transitions.
RequiredScreen Wrapper
Essential wrapper component for all page components
• Provides transition context for animations
• Manages screen lifecycle and state
• Enables gesture-based navigation
• Required for all page components
// Every page must use Screen
import { Screen } from "flemo"
function HomePage() {
return (
<Screen>
<h1>Welcome to Home</h1>
</Screen>
)
}
Important: Screen components automatically receive transition context including current state, navigation parameters, and animation progress through the
useScreen() hook.Transition
Transition defines how screens move during navigation. They control the animation between the current screen and the next screen.
Built-inCupertino
iOS-style slide transitions with smooth easing
• Horizontal slide animations
• Native iOS feel
• Gesture support
Built-inMaterial
Android-style transitions with material design principles
• Elevation-based animations
• Material Design feel
• Shared element transitions
Built-inNone
Instant navigation without animations
• No transition animations
• Immediate screen changes
• Performance optimized
You can create custom transitions using
createTransition() or createRawTransition() for complete control over every animation state.Decorator
Decorator adds visual enhancements on top of transitions. They create additional layers of animation that complement the main screen transition.
Built-inOverlay
Adds a dimming overlay effect during transitions
• Darkens background during navigation
• Works with Cupertino transition
• Enhances depth perception
Create custom decorators using
createDecorator() or createRawDecorator() to add unique visual effects to your transitions.How They Work Together
1. Screen Setup
Each page wrapped in Screen component
2. Navigation
User navigates to a new route
3. Transition
Screens animate according to transition rules
4. Enhancement
Decorators add visual effects
Ready to Get Started?
Now that you understand the core concepts, let's implement them in your project.