Skip to content

Instantly share code, notes, and snippets.

@nmbr73
Last active November 2, 2022 00:04
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save nmbr73/9d63ea043e9f49a45567cef9c4dae278 to your computer and use it in GitHub Desktop.
Save nmbr73/9d63ea043e9f49a45567cef9c4dae278 to your computer and use it in GitHub Desktop.
A nice text effect implemented in SwiftUI by Tobias @Dunkeeel Dunkel.
//
// TobiType.swift
//
// https://twitter.com/dunkeeel/status/1587206501004939264?s=61&t=B4d_UGPw9A9ZN3A894q5yQ
import SwiftUI
struct TobiType: View {
struct SingleLetter: View {
let letter: String
let rotation = Double.random(in: -4.0...4.0)
let backgroundColor: Color
let borderColor: Color
init(_ letter: String, background: Color) {
self.letter = letter
self.backgroundColor = background
let colorComponents:[CGFloat] = UIColor(backgroundColor).cgColor.components ?? [1.0,0.0,0.0,0.0]
self.borderColor = Color(red: colorComponents[0] - 0.2, green: colorComponents[1] - 0.2, blue: colorComponents[2] - 0.2)
}
var body: some View {
Text(letter)
.font(.custom("American Typewriter", size: 36.0))
.foregroundColor(.black)
.frame(width: 36.0, height: 48.0)
.background(backgroundColor)
.overlay {
RoundedRectangle(cornerRadius: 5.0)
.stroke(borderColor, lineWidth: 1.0)
}
.rotationEffect(.degrees(rotation))
.shadow(color: .black.opacity(0.2), radius: 3.0, x: 1.0, y: 2.0)
//.baselineOffset(Double.random(in: -5.0...5.0))
//.transformEffect(CGAffineTransformMakeTranslation(0.0, Double.random(in:-5.0...5.0)))
}
}
let letters: [String]
let spacing: Double
let background: Color
init(_ word: String, spacing: Double = 8, background: Color = Color(red: 1.0, green: 0.95, blue: 0.9)) {
self.letters = word.map({String($0)})
self.spacing = spacing
self.background = background
}
var body: some View {
HStack(spacing: spacing) {
ForEach(letters.indices, id: \.self) { index in
SingleLetter(letters[index], background: background)
// .matchedGeometryEffect(id: (indices?[index] ?? index, in: namespace)
}
}
.padding(5.0)
}
}
struct TobiType_Previews: PreviewProvider {
static var previews: some View {
TobiType("preview", spacing: 1, background: Color(red:0.9,green:0.9,blue:0.2))
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment