A glass dock bar that springs up and sticks to the bottom of a framed page, shrinks while you scroll down, expands on the way up, and can be dismissed and restored.
Engineering
Hana Kowalski · Oct 28, 2026 · 7 min read
Most of our customers spend their day in basements, wind farms and hospital wards. Signal comes and goes, and the old sync engine treated every drop as an error. Field crews were losing photos, and supervisors were re-entering checklists by hand at the end of a shift.
We started from one rule: the device is the source of truth until the server says otherwise. Every edit is written locally first, stamped with a logical clock and replayed in order once a connection returns.
Two inspectors editing the same checklist is not rare, it is Tuesday. Instead of silently picking a winner, the new engine merges field by field and shows a small diff when two people changed the same answer.
The result after six weeks in beta: sync failures down 92 percent, median upload time from 14 seconds to 1.8, and zero lost photos across 410,000 inspections.
Background uploads on Android, selective sync for very large sites, and an audit trail that shows exactly when each change reached the server.
NewFieldnote 3.0 is live
Offline sync, 9x faster uploads and field-level merges.
npx shadcn@latest add https://hyperblur.dev/r/cta-sticky-dock.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/cta-sticky-dock.tsx.
import { CtaStickyDock } from "@/components/hyperblur/cta-sticky-dock"
<CtaStickyDock onOpenChange={(open) => console.log(open)} />| Prop | Type | Default | Description |
|---|---|---|---|
| badge | string | "New" | Small badge before the title. Empty string hides it. |
| title | string | "Fieldnote 3.0 is live" | Main line in the dock. |
| description | string | "Offline sync, 9x faster uploads and field-level merges." | Second line, hidden on narrow containers and while compact. |
| primaryCta | { label: string; href: string } | { label: "Try it free", href: "#" } | White button with a shine. |
| secondaryCta | { label: string; href: string } | { label: "See what changed", href: "#" } | Text button. |
| address | string | "fieldnote.app/blog/offline-sync" | Address shown in the frame chrome. |
| open | boolean | Controlled visibility of the dock. | |
| defaultOpen | boolean | true | Initial visibility when uncontrolled. |
| onOpenChange | (open: boolean) => void | Called when the dock is dismissed (close button or Escape) or restored. | |
| children | React.ReactNode | Sample blog article | Page content rendered inside the frame above the dock. |
| accent | string | "#2f7bff" | Color of the app icon, badge, pulse ring and focus rings. |
| className | string | Extra classes on the root element. | |
| style | React.CSSProperties | Inline styles merged onto the root element. |