Skip to content

Latest commit

 

History

History
81 lines (48 loc) · 3.12 KB

README.md

File metadata and controls

81 lines (48 loc) · 3.12 KB
Raw

GlassCurtain iOS App

This repository showcases a suite of custom UI components designed for display in an iOS app. With a desire to move beyond courses and tutorials, I started this project to explore and stretch the boundaries some boundaries.

Focus

  • Rendering of views and animations for a dynamic user experience.
  • Organized view hierarchy & folder structure for maintainability.
  • Spatial and clean UX design.
  • Dynamic gradient transitions to enhance visual engagement.

Visual Elements

GallerySlider

  • Description: A horizontally-scrollable component for showcasing a series of items.
  • Implementation: Utilizes a ScrollView with custom offset handling for smooth horizontal scrolling.
  • Customization: Supports modification of item spacing, scroll sensitivity, and tracking the scroll progress of each element.

Parallax Scrolling Effect for Images

  • Description: Adds a depth effect to images during scrolling.
  • Implementation: Calculated based on the scroll offset, images move at a different pace than the foreground, creating a parallax illusion.
  • Use-case: Enhances the user's sense of depth and motion within the app.

Text Slide with Dynamic Gradient

  • Description: Text elements that dynamically change their gradient based on screen position.
  • Implementation: Utilizes SwiftUI’s environmental values to adjust gradients in response to scroll position changes.
  • Use-case: Highlights active or focused content.

Gradient Header with Scroll Position

  • Description: A header component that changes its gradient based on the scroll position of the user.
  • Implementation: Integrates scroll offset data to modify the linear gradient of the header.
  • Use-case: Serves as an interactive visual cue, enhancing user orientation within the app.

Image Reflections

  • Description: Adds reflective effects beneath images.
  • Implementation: Achieved through layering and opacity adjustments to simulate reflections.
  • Use-case: Augments the visual appeal and depth of images.

Custom Cutout for ImageSlider

  • Description: A distinct cutout shape for the image slider.
  • Implementation: Utilizes custom shapes and clipping to create unique visual frames for content.
  • Use-case: Enhances UI uniqueness.

Flippable Card ProductView

  • Description: An interactive, card-like component for detailed product viewing.
  • Implementation: Combines SwiftUI views and gestures to create a flippable card effect.
  • Use-case: Offers an engaging way for users to explore product details, enhancing the customer's sense of belonging.

Requirements

  • iOS 13.0 or later
  • Xcode 11.0 or later
  • Swift 5.0 or later

Demo

Intro.mp4

BackgroundGradient sped up x2

SpeedUp.2x.mp4

Credits: