Scale Scroll Effect

1//
2//  PositionEffectsView.swift
3//  blxssxm-ios-components
4//
5//  Created by Felix G on 17/4/25.
6//
7
8import SwiftUI
9
10struct PositionEffectsView: View {
11    var body: some View {
12        ScrollView(.vertical) {
13            VStack(spacing: 16) {
14                ForEach(0..<25, id: \.self) { index in
15                    RoundedRectangle(cornerRadius: 24)
16                        .fill(.purple)
17                        .frame(height: 100)
18                        .visualEffect { content, proxy in
19                            let frame = proxy.frame(in: .scrollView(axis: .vertical))
20                            let parentBounds = proxy
21                                .bounds(of: .scrollView(axis: .vertical)) ??
22                                .infinite
23                            
24                            // The distance this view extends past the bottom edge
25                            // of the scroll view.
26                            let distance = min(0, frame.minY)
27                            
28                            return content
29                                .hueRotation(.degrees(frame.origin.y / 10))
30                                .scaleEffect(1 + distance / 700)
31                                .offset(y: -distance / 1.25)
32                                .brightness(-distance / 400)
33                                .blur(radius: -distance / 50)
34                        }
35                }
36            }
37            .padding()
38        }
39    }
40}
41
42// MARK: - Demo View for ContentView integration
43struct PositionEffectsDemoView: View {
44    var body: some View {
45        PositionEffectsView()
46    }
47}
48
49#Preview {
50    NavigationView {
51        PositionEffectsView()
52    }
53}