Title: Mobile image carousel — center-focused, swipe-left/right only, smooth iPhone-like animations (target: Android — Samsung)Overview / ObjectiveCreate a minimal image-carousel UI that shows one large photo centered in the screen. User can only swipe horizontally (left / right) to move between photos. No extra buttons, no menus, no captions — only the photos and very polished animations that feel as smooth and natural as iPhone native gestures. Target primary device: Samsung (Android mobile), but implement in a cross-platform-friendly way if possible.Functional requirements1. Single responsibility: only horizontal swipe left / right to change photo. No other interactions (no zoom, no image taps, no long-press).2. Center-focused layout: the active image is perfectly centered and scaled to be dominant. Neighboring images must slightly peek from the sides to indicate more content.3. Gesture behavior: support natural finger swipes with velocity + distance thresholds:Short swipe + low velocity → snap back to current image.Short swipe but high velocity → go to next/previous.Drag should follow finger, with resistance at edges.4. Non-looping (default): when at first or last image, swiping beyond should show subtle resistance and snap back.5. Image handling: maintain aspect ratio using cover behavior, center-cropped on the card. Accept different image sizes/ratios.Design / visual specContainer: centered card, width = ~88% of screen width, height = ~60–75% of screen height (adaptive; keep consistent look on tall/short screens).Card style: rounded corners radius 18–28px, soft elevation/shadow, overflow hidden.Peeking: adjacent cards visible ~10–12% of card width on each side.Background: neutral dark/blur behind images (or blurred/gradient version of current image) so the focused image stands out.No chrome: no arrows, no dots, no toolbars. If developer insists on an indicator for debugging, it must be hidden in production.Animation / motionType: physics-based spring for snapping (preferred). Use hardware-accelerated transforms (translate3d / transform) only.Suggested spring parameters (tunable):stiffness: 900–1200damping: 70–90mass: 1alternative CSS easing: cubic-bezier(0.22, 1.0, 0.36, 1.0) for non-spring transitions.Visual effects while dragging:Active card scale → 1.00; adjacent cards scale → 0.92–0.95.Active card shadow intensity increases slightly; neighbors dim to opacity 0.6–0.8.Subtle parallax: image inside card translates at ~20% of card movement (gives depth).Snap behaviour: snap to exactly centered position after release. Animation should feel responsive and never stutter.Frame rate target: stable 60 fps on Samsung S21 (optimize to avoid layout thrashing).Performance & engineeringUse transforms (translate/scale) only — avoid animating width, left, or top.Lazy-load images and use blurred low-res placeholder (progressive loading).Use native gesture handling / native driver when available (e.g., Android native gestures, React Native Gesture Handler + Reanimated, Flutter's native animations, or MotionLayout on Android).For web builds: use will-change: transform; and translate3d to force GPU compositing.Debounce reflows; reuse item views (RecyclerView/ViewPager2 on Android).AccessibilityProvide contentDescription / alt text for each image.Allow keyboard/swipe alternatives for accessibility services (left/right actions).Ensure sufficient contrast for any UI chrome (if any).Technical implementation suggestions (pick one)Android native (Kotlin): RecyclerView + LinearLayoutManager in horizontal mode or ViewPager2 + CompositePageTransformer / MotionLayout for custom transforms.React Native: react-native-reanimated + react-native-gesture-handler with native driver to keep 60 fps. Use useSharedValue + withSpring for snapping.Flutter: PageView + custom PageTransformer (use Transform and AnimatedBuilder).Web (mobile): custom slider using pointer events + requestAnimationFrame, or a light library that allows custom physics and native-like gestures (but prefer custom for full control).Deliverables1. A working demo (APK or web demo link or runnable emulator build).2. Source code with clear README: how to run, build, and test.3. A short screen recording (10–15s) showing smooth swipes left and right, including edge resistance.4. Unit/e2e test or manual test checklist showing the gestures and edge cases were tested.Acceptance criteriaSwipe left/right follows finger position (dragging follows smoothly).Release triggers spring snap to next/previous or back-to-current according to velocity/threshold.No stuttering or noticeable frame drops on a Samsung S21 under normal load.Images are center-focused; adjacent images partially visible.No extra UI visible in production.Accessibility labels present.Optional nice-to-haves (only if time/budget allows)Subtle tilt/3D rotation while dragging (very small, e.g., rotateY = 2–4 degrees).A blurred background that crossfades to a blurred version of the centered photo.Simple configuration: loop: bool, peekingWidth: px, edgeResistance: number.
I'll create a smooth, iPhone-like image carousel optimized for mobile devices with natural gesture handling and physics-based animations.
I've created a premium mobile image carousel that meets all your specifications:
🎯 Core Functionality:
📱 Mobile-Optimized Gestures:
🎨 Visual Polish:
⚡ Performance Optimizations:
translate3d, will-change)♿ Accessibility:
🔧 Configuration Options:
loop: Enable/disable infinite scrollingpeekingWidth: Adjust how much adjacent cards showedgeResistance: Control rubber band strength at edgesThe implementation uses custom gesture handling with pointer events, spring-based physics for natural animations, and follows all the performance guidelines you specified. The carousel feels native and smooth, especially on Samsung devices, with iPhone-like gesture responsiveness.
Create a simple mobile image carousel that shows one large photo in the center and allows swiping left or right to change images. No buttons, no extra UI - only photos. The swipe should be smooth and fluid, like on an iPhone, with soft animations and a spring effect.Center image is main, neighbors slightly visible on sides.Rounded corners, light shadow, nice modern look.Keep 60 fps performance on Samsung devices.Swipe follows finger, snaps to next or back depending on velocity.Images keep aspect ratio (cover).
I'll create a clean, simple mobile image carousel with smooth iPhone-like gestures and animations.
I've created a clean, simple mobile image carousel that delivers exactly what you requested:
🎯 Simple & Clean:
📱 iPhone-like Gestures:
cubic-bezier(0.34, 1.56, 0.64, 1) easing🎨 Visual Polish:
⚡ Performance Optimized:
translate3d, will-change)📐 Image Handling:
object-coverThe carousel feels native and fluid, with the exact iPhone-like spring physics you wanted. Swipe gestures are natural and responsive, and the performance is optimized for smooth 60fps on Samsung devices.
Title: Grid of 7 independent image carousels (4 top, 3 bottom) — mobile-firstGoal:Build a responsive UI with 7 independent image carousels arranged in two rows (4 on top, 3 on bottom). Each carousel sits inside a square container and must allow: - horizontal swipe (touch) left/right - left and right arrow buttons overlayed on the sides to change images - no autoplay unless specifiedBehavior & UX: - Each carousel shows one centered image at a time (cover, centered crop). - Swipe should follow finger (drag), with velocity + distance threshold for snapping. - Snap must be physics-based (spring), smooth and hardware-accelerated (translate3d). - Arrow buttons perform the same navigation as swipe and must be touch-friendly (hit area >= 44px). - Carousels are independent (swiping one does not affect others). - At first/last image, show subtle edge resistance and snap back (no infinite loop by default).Layout & Design: - Grid: top row = 4 equal squares, bottom row = 3 equal squares, consistent spacing/gutter. - On narrow screens, stack responsively (e.g., 2 columns). - Square container: rounded corners (12–20px), soft shadow, overflow hidden. - Arrow style: simple chevrons, semi-transparent circular background, vertically centered. - No captions, no dots, minimal chrome.Animation & Performance: - Use transform (translate3d, scale) only. Avoid layout-changing properties. - Spring params example: stiffness ~1000, damping ~80, mass=1 (tune as needed). - Parallax small: inner image translates ~15–25% of drag distance. - Target stable 60 fps on Samsung devices — prefer native gesture drivers or optimized web drivers.Accessibility & Loading: - Provide alt/text for images. - Keyboard left/right must work on desktop. - Lazy-load images; use low-res blurred placeholders.Deliverables: - Working demo (web or APK) + source code + README. - Short screen recording showing swipes and arrow navigation. - Test checklist: swipe slow, swipe fast, edge resistance, arrow taps, keyboard navigation.Assumptions: - Images vary in ratio; use object-fit: cover. - No autoplay, non-looping by default. If loop required, specify.