Magnetic UI

npm install magnetkit

import { useRef, useState } from "react";
import { MagnetCalibration, useMagnetBridge, useMagnetGestures, useMagneticPull } from "magnetkit";

export function Header() {
  const ref = useRef<HTMLElement>(null);
  const { state, connect, calibrated } = useMagnetBridge();
  const [calibrating, setCalibrating] = useState(false);

  // 1. Everything marked data-magnetic is pulled toward the magnet and springs back.
  useMagneticPull(ref);

  // 2. Air taps, pushes, yanks and swipes.
  useMagnetGestures((g) => {
    if (g.g === "tap") openMenu();
  });

  return (
    <header ref={ref}>
      <a data-magnetic href="/">Home</a>
      <a data-magnetic href="/docs">Docs</a>
      {state !== "open" ? (
        <button onClick={connect}>Connect magnet</button>
      ) : !calibrated ? (
        <button onClick={() => setCalibrating(true)}>Calibrate</button>
      ) : null}
      {/* 3. Once per phone and magnet: five rings, about 10 s, kept by the app. */}
      <MagnetCalibration open={calibrating} onClose={() => setCalibrating(false)} />
    </header>
  );
}

import { getMagnetBridge, useMagnet, useMagnetFrame, simulateMagnetWithPointer } from "magnetkit";

// The latest reading as state (one render per animation frame)…
const f = useMagnet();
const at = f?.pos && getMagnetBridge().toClient(f.pos);   // page px

// …or every reading without rendering (about 50 a second).
useMagnetFrame((f) => {
  dot.style.opacity = String(f.presence);
});

// No phone at hand: the pointer plays the magnet (press and hold).
if (import.meta.env.DEV) simulateMagnetWithPointer();

// Package.swift, or in Xcode: File › Add Package Dependencies… › paste the URL (Branch: main)
.package(url: "https://github.com/Jakubantalik/Libraries.dev", branch: "main")
// …and in your target's dependencies:
.product(name: "MagnetKit", package: "Libraries.dev")

import SwiftUI
import MagnetKit

// 1. Tell the model about your phone and magnet (once, e.g. in your App's init).
let magnet = MagnetSource.shared
magnet.config.locatorEnabled = true
magnet.config.sensorPosition = CGPoint(x: 70, y: 86)   // the magnetometer, window points
magnet.config.magnetFace = 1                            // north face toward the user
magnet.config.magnetStrength = 6500                     // µT·cm³, optional

// 2. Read it every frame.
struct MagnetDot: View {
    var body: some View {
        TimelineView(.animation) { ctx in
            let r = MagnetSource.shared.reading(now: ctx.date.timeIntervalSinceReferenceDate)
            if let p = r.screenPosition, r.presence > 0.5 {
                Circle().fill(.white).frame(width: 24, height: 24).position(p)
            }
        }
        .ignoresSafeArea()
        .onAppear { MagnetSource.shared.attach() }
        .onDisappear { MagnetSource.shared.detach() }
    }
}

// 3. Air taps, pushes, yanks and swipes.
MagnetSource.shared.addGestureHandler { gesture in
    switch gesture {
    case .tap(let at):         openMenu(at: at)      // at: global points
    case .pullAway(let speed): flingAway(speed)      // cm/s
    case .push, .swipe:        break
    }
}

// A reading is plain values, so anything can follow it:
// a SwiftUI offset, a spring, a shader uniform.
let r = MagnetSource.shared.reading(now: now)
card.offset(x: r.toward.dx * r.pull * 24, y: r.toward.dy * r.pull * 24)

// Metal's liquid rings read it for you:
import MetalFxKit   // brings MagnetKit along
MetalFx(variant: .circle, source: .magnet) {
    Image(systemName: "arrow.right").frame(width: 52, height: 52)
}

npx expo install react-native-magnetkit

// app.json: the plugin copies the model into the iOS and Android apps.
{
  "expo": {
    "plugins": [["react-native-magnetkit", { "model": "./assets/Magnet.mfxl" }]]
  }
}

npx expo run:ios   // or run:android; a development build, not Expo Go

import { useState } from "react";
import { Pressable, Text } from "react-native";
import { Magnet, MagnetCalibration, MagneticView, useMagnetGestures } from "react-native-magnetkit";

export function Home() {
  const [calibrating, setCalibrating] = useState(false);

  // Air taps, pushes, yanks and swipes.
  useMagnetGestures((g) => {
    if (g.g === "tap") openMenu(g.at);   // at: window points
  });

  return (
    <>
      {/* 1. Views the magnet pulls. They collide, and spring back when it leaves. */}
      <MagneticView style={styles.chip}><Text>Home</Text></MagneticView>
      <MagneticView style={styles.chip}><Text>Search</Text></MagneticView>

      {/* 2. Once per phone and magnet: five rings, about 10 s, kept across launches. */}
      {!Magnet.getMagnet() && (
        <Pressable onPress={() => setCalibrating(true)}><Text>Calibrate</Text></Pressable>
      )}
      <MagnetCalibration visible={calibrating} onClose={() => setCalibrating(false)} />
    </>
  );
}

import { useMagnet, useMagnetFrame } from "react-native-magnetkit";

// The latest reading as state (one render per animation frame)…
const f = useMagnet();
// f.pos: the magnet, window points · f.presence 0-1 · f.pull 0-1, f.toward
// f.strength µT · f.distance cm · f.approachSpeed cm/s · f.tooClose · f.calibrating

// …or every reading without rendering, e.g. into an Animated value.
useMagnetFrame((f) => glow.setValue(f.pull * f.presence));

// Get the code: clone Libraries.dev (or add it as a git submodule) next to your app.
git submodule add https://github.com/Jakubantalik/Libraries.dev libraries-dev

// settings.gradle.kts
include(":magnetkit")
project(":magnetkit").projectDir = file("libraries-dev/packages/metal-fx/ports/android/magnetkit")

// app/build.gradle.kts
dependencies { implementation(project(":magnetkit")) }

import dev.libraries.magnetkit.*

// 1. Tell the model about your phone and magnet (once).
val magnet = MagnetSource.get(context)
magnet.config.locatorEnabled = true
magnet.config.screenSize = Pt(411.0, 923.0)        // the screen, dp
magnet.config.sensorPosition = Pt(205.0, 70.0)     // the magnetometer, dp
magnet.config.magnetFace = 1                       // north face toward the user
magnet.config.magnetStrength = 6500.0              // µT·cm³, optional

// 2. Attach while visible, read it every frame.
override fun onStart() { super.onStart(); magnet.attach() }
override fun onStop() { magnet.detach(); super.onStop() }

Choreographer.getInstance().postFrameCallback(object : Choreographer.FrameCallback {
    override fun doFrame(frameTimeNanos: Long) {
        val r = magnet.reading(frameTimeNanos / 1e9)
        r.screenPosition?.takeIf { r.presence > 0.5 }?.let { p -> moveDot(p.x, p.y) }   // dp
        Choreographer.getInstance().postFrameCallback(this)
    }
})

// 3. Air taps, pushes, yanks and swipes (main thread).
magnet.addGestureListener { g ->
    when (g) {
        is MagnetGesture.Tap -> openMenu(g.at)
        is MagnetGesture.PullAway -> flingAway(g.speed)
        else -> {}
    }
}

import json, struct
import numpy as np

def read_header(b):
    assert b[:4] == b"MFXL"
    n = struct.unpack("<I", b[4:8])[0]
    return json.loads(b[8:8 + n]), 8 + n

data = open("Magnet.mfxl", "rb").read()
model, start = read_header(data)          # kind "magnet", version, parts

def load(name):
    p = next(p for p in model["parts"] if p["name"] == name)
    b = data[start + p["offset"]: start + p["offset"] + p["length"]]
    head, off = read_header(b)            # inputs, outputs, layers, constants
    layers = []
    for L in head["layers"]:
        n_in, n_out = L["in"], L["out"]
        w = np.frombuffer(b, np.float16, n_in * n_out, off).astype(np.float32).reshape(n_out, n_in)
        off += w.size * 2
        bias = np.frombuffer(b, np.float16, n_out, off).astype(np.float32)
        off += bias.size * 2
        layers.append((w, bias, L.get("act") == "silu"))
    return head, layers

def run(layers, x):
    for w, bias, silu in layers:
        x = w @ x + bias
        if silu:
            x = x / (1 + np.exp(-x))      # SiLU
    return x

# Where the magnet is, from one field change (µT, device axes).
head, locator = load("locator")
def locate(b, strength=None, face=None):
    b = np.asarray(b, np.float32)
    nb = np.linalg.norm(b)
    u = b / nb
    if face is not None: u = u * face
    elif u[2] < 0: u = -u
    x = np.array([u[0], u[1], u[2],
                  (np.log(nb) - head["logbMid"]) / 2,
                  (np.log(strength) - head["logkMid"]) / 1.5 if strength else 0,
                  1.0 if strength else 0.0, 1.0 if face is not None else 0.0], np.float32)
    y = run(locator, x)
    d = y[:3] / np.linalg.norm(y[:3])
    r = np.exp(y[3] + head["logrMid"])    # cm
    return d * r                          # magnet relative to the sensor, cm

# A magnet 2 cm right, 3 cm below and 1.5 cm above the sensor, north face up:
print(locate([64.4, -96.6, -60.8], strength=6500, face=1))   # ≈ [1.94, -3.02, 1.58]