TikTok For You Page
Goal:
Goal: To make TikTok For You Page.
Note: All buttons are static.
Date: April 17, 2026
Thoughts:
Made this in a couple of hours. I'd like to figure out showing videos, but not sure how that works yet.
Real TikTok For You Page
For You Page made with SwiftUI
Code example
Here is the Swift code used to make this. Replace "peach" in UIButton.
import SwiftUI
struct ContentView: View {
@State private var currentItem: Int?
@State private var uiOpacity: Double = 1
var body: some View {
ZStack{
Color(.black)
.ignoresSafeArea()
ScrollView(.vertical,showsIndicators:false){
LazyVStack(spacing: 0) {
ForEach(0..<20, id: \.self) { index in
ContentBlock(uiOpacity: uiOpacity)
.id(index)
}
}
.scrollTargetLayout()
}
.scrollPosition(id: $currentItem)
.scrollTargetBehavior(.paging)
.ignoresSafeArea()
.onScrollPhaseChange { oldPhase, newPhase in
withAnimation {
uiOpacity = newPhase.isScrolling ? 0.5 : 1
}
}
UIView(uiOpacity: uiOpacity)
}
}
}
struct ContentBlock: View {
var uiOpacity: Double = 1
var body: some View {
ZStack{
ZStack{
ColorWall()
// Color(.blue)
Image(systemName: "play.square.stack")
.font(.system(size: 100))
}
.padding(.bottom,84)
SideButtons(uiOpacity: uiOpacity)
.padding(.bottom,94)
VStack {
Spacer()
VStack{
HStack{
Text("Profile Name")
.padding(.horizontal,10)
.font(.system(size: 20))
.bold(true)
Spacer()
}
.foregroundStyle(Color.white)
HStack{
Text("Content Info")
.padding(.horizontal,10)
Spacer()
}
.foregroundStyle(Color.white)
ZStack{
Rectangle()
.frame(height: 30)
.opacity(0.5)
.foregroundStyle(Color.black)
HStack{
Image(systemName: "magnifyingglass")
.font(.system(size: 20))
Text("Relavent search topic")
Spacer()
}
.foregroundStyle(Color.white)
}
}
.opacity(uiOpacity)
}
.padding(.bottom,84)
.containerRelativeFrame([.vertical, .horizontal])
}
}
}
struct BottomBar: View {
var body: some View {
ZStack{
VStack{
// Spacer()
Rectangle()
.fill(Color.black)
.ignoresSafeArea(.container)
.frame(height: 50)
.overlay(content: {
HStack{
UIButton(text:"Home",systemNameCh: "house.fill")
Spacer()
UIButton(text:"Social",systemNameCh: "person.2")
Spacer()
UIButton(text:"",systemNameCh: "plus.capsule.fill")
Spacer()
UIButton(text:"Inbox",systemNameCh: "tray")
Spacer()
UIButton(text:"Profile",systemNameCh: "person")
}
.padding(.horizontal,20)
.padding(.top,20)
})
}
}
}
}
struct SideButtons: View {
var uiOpacity: Double = 1
var body: some View {
HStack {
Spacer()
VStack {
Spacer()
ZStack {
UIButton(typeCh:"profile", text:"")
.padding(.vertical,10)
VStack {
Spacer()
Button{}label: {
Image(systemName: "plus.circle.fill")
.font(.system(size: 20))
.foregroundColor(.red)
}
}
}
.frame(height: 45)
UIButton(text:"123",systemNameCh: "heart.fill")
.padding(.vertical,10)
UIButton(text:"123",systemNameCh: "ellipsis.message.fill")
.padding(.vertical,10)
UIButton(text:"123",systemNameCh: "bookmark.fill")
.padding(.vertical,10)
UIButton(text:"123",systemNameCh: "square.and.arrow.up.fill")
.padding(.vertical,10)
UIButton(typeCh:"sound", text:"")
.padding(.vertical,10)
}
}
.opacity(uiOpacity)
.padding(.horizontal,10)
.padding(.vertical,20)
}
}
struct UIView: View {
var uiOpacity: Double = 1
var body: some View {
VStack{
HStack{
UIButton(text:"",systemNameCh: "tv")
.padding(.horizontal,10)
ScrollView(.horizontal, showsIndicators: false){
HStack{
UIButton(text:"Stem")
.padding(.horizontal,10)
UIButton(text:"Explore")
.padding(.horizontal,10)
UIButton(text:"Local")
.padding(.horizontal,10)
UIButton(text:"Following")
.padding(.horizontal,10)
UIButton(text:"Shop")
.padding(.horizontal,10)
UIButton(text:"For You")
.padding(.horizontal,10)
}
}
}
Spacer()
BottomBar()
}
}
}
struct UIButton: View {
var typeCh: String = "ui"
var text: String = "00"
var systemNameCh: String = ""
var imageNameCh: String = "peach"
var colorCh: Color = .white
var fontSize: Int = 14
var body: some View {
Button{
print("side button pressed")
} label: {
ZStack{
VStack {
if typeCh == "profile" {
Image(imageNameCh)
.resizable()
.scaledToFill()
.frame(width: 45, height: 45)
.clipShape(Circle())
}else if typeCh == "sound" {
Image(imageNameCh)
.resizable()
.scaledToFill()
.frame(width: 45, height: 45)
.clipShape(Circle())
}
else{
Image(systemName: systemNameCh)
.font(.system(size: 30))
.foregroundColor(colorCh)
}
if !text.isEmpty {
Text(text)
.foregroundColor(colorCh)
.font(Font.system(size: CGFloat(fontSize)))
}
}
}
}
}
}
struct ColorWall: View {
@State private var moves: [SIMD2<Float>] = [
[0.0,0.0],[0.5,0.0],[1.0,0.0],
[0.0,0.5],[0.9,0.3],[1.0,0.5],
[0.0,1.0],[0.5,1.0],[1.0,1.0],
]
let colorRandomOne = Int.random(in: 0...6)
let colorRandomTwo = Int.random(in: 0...6)
let ColorChs = [Color.red,Color.orange,Color.yellow,Color.green,Color.blue,Color.purple,Color.pink]
let ColorOne = Color.black
var body: some View {
ZStack{
ZStack{
MeshGradient(
width:3,
height: 3,
points:moves,
colors:[
ColorOne,ColorOne,ColorOne,
ColorChs[colorRandomOne],ColorChs[colorRandomOne],ColorChs[colorRandomOne],
ColorChs[colorRandomTwo],ColorChs[colorRandomTwo],ColorChs[colorRandomTwo]
]
)
.ignoresSafeArea()
}
}
}
}
#Preview {
ContentView()
}