Add example app branding and large screen layout (#15)

* feat(web): use CSS linear() for spring animations

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)

* chore: release 0.4.0

* feat(example): add branding assets and improve large screen layout

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.

* chore: remove unnecessary *.png gitignore rule

* fix(example): remove splash screen, enlarge adaptive icon foreground

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.

* fix(example): set splash background color to match app theme

* fix(example): enlarge leaves and improve spacing in icon assets

* fix(example): update iOS build script to match renamed app

The app was renamed from EaseExample to Ease but the build:ios script
still referenced the old workspace and scheme names, breaking CI.

Author: janicduplessis

.gitignore

@@ -85,4 +85,3 @@ android/generated
 # React Native Nitro Modules
 nitrogen/
 .playwright-cli/
-*.png

example/app.json

@@ -1,11 +1,15 @@
 {
-  "name": "EaseExample",
-  "displayName": "EaseExample",
+  "name": "Ease",
+  "displayName": "Ease",
   "expo": {
-    "name": "EaseExample",
+    "name": "Ease",
     "slug": "ease-example",
     "scheme": "ease-example",
     "version": "1.0.0",
+    "icon": "./assets/icon.png",
+    "splash": {
+      "backgroundColor": "#1a1a2e"
+    },
     "plugins": [
       [
         "expo-router",
@@ -16,15 +20,20 @@
     ],
     "web": {
       "bundler": "metro",
-      "output": "single"
+      "output": "single",
+      "favicon": "./assets/favicon.png"
     },
     "platforms": [
       "ios",
       "android",
       "web"
     ],
     "android": {
-      "package": "com.janic.easeexample"
+      "package": "com.janic.easeexample",
+      "adaptiveIcon": {
+        "foregroundImage": "./assets/adaptive-icon.png",
+        "backgroundColor": "#1a1a2e"
+      }
     },
     "ios": {
       "bundleIdentifier": "com.janic.easeexample"

example/app/_layout.tsx

@@ -1,17 +1,21 @@
 import { Stack } from 'expo-router';
 
+import { MaxWidthContainer } from '../src/components/MaxWidthContainer';
+
 export default function RootLayout() {
   return (
-    <Stack
-      screenOptions={{
-        headerStyle: { backgroundColor: '#1a1a2e' },
-        headerTintColor: '#fff',
-        headerTitleStyle: { fontWeight: '700' },
-        headerBackButtonDisplayMode: 'minimal',
-        contentStyle: { backgroundColor: '#1a1a2e' },
-      }}
-    >
-      <Stack.Screen name="index" options={{ headerShown: false }} />
-    </Stack>
+    <MaxWidthContainer>
+      <Stack
+        screenOptions={{
+          headerStyle: { backgroundColor: '#1a1a2e' },
+          headerTintColor: '#fff',
+          headerTitleStyle: { fontWeight: '700' },
+          headerBackButtonDisplayMode: 'minimal',
+          contentStyle: { backgroundColor: '#1a1a2e' },
+        }}
+      >
+        <Stack.Screen name="index" options={{ headerShown: false }} />
+      </Stack>
+    </MaxWidthContainer>
   );
 }

example/assets/adaptive-icon.png

@@ -10,7 +10,7 @@
     "web": "expo start --web",
     "prebuild": "expo prebuild",
     "build:android": "expo prebuild --platform android --clean && cd android && ./gradlew assembleDebug --no-daemon --console=plain -PreactNativeArchitectures=arm64-v8a",
-    "build:ios": "expo prebuild --platform ios --clean && xcodebuild -workspace ios/EaseExample.xcworkspace -scheme EaseExample -configuration Debug -sdk iphonesimulator -arch x86_64 build"
+    "build:ios": "expo prebuild --platform ios --clean && xcodebuild -workspace ios/Ease.xcworkspace -scheme Ease -configuration Debug -sdk iphonesimulator -arch x86_64 build"
   },
   "dependencies": {
     "@expo/metro-runtime": "~55.0.6",

example/assets/favicon.png

@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta httpEquiv="X-UA-Compatible" content="IE=edge" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1, shrink-to-fit=no"
+    />
+    <meta name="theme-color" content="#1a1a2e" />
+    <title>Ease</title>
+    <style id="expo-reset">
+      html,
+      body {
+        height: 100%;
+      }
+      body {
+        overflow: hidden;
+        background-color: #1a1a2e;
+      }
+      #root {
+        display: flex;
+        height: 100%;
+        flex: 1;
+      }
+    </style>
+  </head>
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+  </body>
+</html>

example/assets/icon.png

@@ -0,0 +1,24 @@
+import React from 'react';
+import { View, StyleSheet } from 'react-native';
+
+const MAX_WIDTH = 600;
+
+export function MaxWidthContainer({ children }: { children: React.ReactNode }) {
+  return (
+    <View style={styles.container}>
+      <View style={styles.inner}>{children}</View>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    alignItems: 'center',
+  },
+  inner: {
+    flex: 1,
+    width: '100%',
+    maxWidth: MAX_WIDTH,
+  },
+});

example/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-ease",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "description": "Lightweight declarative animations powered by platform APIs",
   "main": "./lib/module/index.js",
   "types": "./lib/typescript/src/index.d.ts",