TearKit

This repository contains:

• TearKit: a reusable Swift Package (SwiftUI + Metal) with the tear/rip interaction.
• TearKitDemo: a demo iOS app that consumes TearKit.

Inspiration

This project is a clear reference to the idea presented by @naoenomoto on X.

Project Overview

• Edge-based interactive tear gesture.
• Real-time Metal distortion shader.
• Direction modes for tearing (.vertical, .horizontal, .anyDirection).
• Configurable threshold logic (breakThreshold) for full break vs recovery.
• External progress/completion callbacks so host apps define final UI behavior.

Demo

Photo Credit

• Demo photo source: Unsplash
• Photographer: Philipp Dice

Structure

• Package.swift: package manifest.
• Sources/TearKit/TearTypes.swift: shared tear types (TearEdge, TearCutDirection).
• Sources/TearKit/TearState.swift: tear state and gesture math.
• Sources/TearKit/TearModifier.swift: SwiftUI modifier that wires gesture + shader.
• Sources/TearKit/Extensions/View+TearKitExtensions.swift: public View extension (tearable).
• Sources/TearKit/TearEffect.metal: tear shader.
• TearKitDemo/ContentView.swift: demo usage and host-side animation.
• Tests/TearKitTests/TearStateTests.swift: unit tests for geometry/state rules.
• docs/: detailed documentation.

Installation

Swift Package Manager (Xcode)

1. In Xcode, go to File > Add Package Dependencies...
2. Enter your repository URL.
3. Select the TearKit library product in your target.

Swift Package Manager (Package.swift)

dependencies: [
  .package(url: "https://github.com/<your-org>/TearKit.git", from: "1.0.0")
],
targets: [
  .target(
    name: "MyFeature",
    dependencies: [
      .product(name: "TearKit", package: "TearKit")
    ]
  )
]

Usage

import TearKit

MyView()
  .tearable(
    edgeRoughness: 4,
    maxGapWidth: 20,
    breakThreshold: 0.9,
    cutDirection: .anyDirection, // .vertical | .horizontal | .anyDirection
    isBroken: $isBroken, // set false to recover, set true to force broken state
    onProgressChanged: { progress in
      // 0...1
    },
    onCompletion: { isFullyBroken in
      // true: fully torn, false: recovered
    }
  )

API Notes

• breakThreshold is clamped to 0...1.
• edgeRoughness and maxGapWidth are clamped to non-negative values.
• isBroken can be used to externally reset (false) or force the broken state (true).

Documentation

• English documentation
• Documentación en español

Running

1. Open TearKitDemo.xcodeproj in Xcode.
2. Build and run the TearKitDemo scheme.
3. Drag from any edge on the demo card to test tearing behavior.