Skip to content

Add example app branding and large screen layout#15

Merged
janicduplessis merged 8 commits intomainfrom
@janic/example-branding-layout
Mar 25, 2026
Merged

Add example app branding and large screen layout#15
janicduplessis merged 8 commits intomainfrom
@janic/example-branding-layout

Conversation

@janicduplessis
Copy link
Collaborator

Summary

The example app was missing app icons, splash screen, and favicon, and the layout stretched full-width on large screens (especially web) which looked bad.

This adds branded assets (app icon with the S-curve + floating leaves motif, adaptive icon for Android, favicon, and splash screen) and wraps the root layout in a max-width container (600px) so it stays readable on wide viewports. Also adds a custom web index.html with the dark background color to prevent white flash on load.

Test Plan

  • Run yarn example ios / yarn example android and verify the new app icon and splash screen appear
  • Run yarn example web and verify:
    • Favicon shows in the browser tab
    • No white flash on load (dark background immediately)
    • Content is capped at 600px width on wide screens
    • Navigation and demos still work correctly

Replace the hardcoded cubic-bezier spring approximation with a real
spring physics simulation that generates CSS linear() easing points.
This matches native iOS/Android spring behavior much more closely.

- Add damped spring simulator (120Hz, downsampled to 60fps output)
- Cache generated linear() strings by spring params
- Lazy feature detection with cubic-bezier fallback
- Duration now derived from simulation settling time (uses stiffness)
Add app icon, adaptive icon, favicon, and splash screen with the ease
branding (S-curve with floating leaves). Configure app.json with all
asset references. Add MaxWidthContainer to cap content at 600px on
wide screens/web, and a custom index.html with dark background to
prevent white flash on web load.
Drop the custom splash image — modern Expo handles splash via the app
icon automatically. Increase the adaptive icon foreground from 55% to
75% of the canvas so it fills the Android safe zone properly.
The app was renamed from EaseExample to Ease but the build:ios script
still referenced the old workspace and scheme names, breaking CI.
@janicduplessis janicduplessis merged commit 21d83a7 into main Mar 25, 2026
4 checks passed
@janicduplessis janicduplessis deleted the @janic/example-branding-layout branch March 25, 2026 07:17
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant