3D device mockups, now on phones too

The homepage has always used framed device mockups — a MacBook and an iPhone, each carrying a screenshot of the dashboard, tilted slightly for depth — to show what the product actually looks like rather than describing it in prose. Until this pass, that device framing was effectively a desktop feature: narrow viewports fell back to a flatter presentation, so a visitor browsing on their own phone saw a different, plainer version of the same section.

Why it matters on a phone

A visitor reading about a trading dashboard on their phone is, by definition, looking at a phone. Showing them a flat screenshot instead of the same device-framed treatment desktop visitors get was a small but real mismatch: the one audience most likely to actually use an iPhone to check their account was shown the least representative picture of what that looks like.

The fix keeps the same 3D tilt and shadow depth at phone widths that it always had on desktop, rather than swapping to a simplified layout once the viewport narrows. The MacBook frame shows the equity curve; the iPhone frame beside it shows trade history — the same pairing, the same motion, just reachable on the device most people are actually holding.

What else moved with it

• The mockups keep their tilt during touch scrolling instead of snapping flat, so the effect holds together as you scroll past the section rather than breaking at the moment you touch the screen.
• The iPhone frame no longer renders partly off-screen at the widths in between a phone and a desktop — iPad-portrait width in particular, where it used to sit past the edge of the viewport and go invisible rather than visibly wrong.
• A caption under the section still states plainly that the figures inside the mockups are sample data, not a live account and not a claim about returns.

Touch behaves like a pointer here, deliberately

On a device with a mouse, the tilt responds to pointer position — moving the cursor near the mockup shifts the angle slightly, as if you were looking at a physical object from a different side. On a touch device there is no hover state to drive that, so the frames instead carry a scroll-linked tilt and a gentle idle float: the angle shifts gradually as you scroll past the section, and settles into a slow, subtle drift when you are not interacting with it at all. Earlier, touching the frame could cause it to snap flat — losing the tilt the moment a finger touched the screen — which is specifically what this pass corrected: the 3D angle now holds through a touch interaction instead of resetting.

How to see it

1. Open cfin.be on a phone, or narrow a desktop browser window to phone width.
2. Scroll to the section titled “Everything in one place”.
3. The MacBook and iPhone frames should both be visible, tilted, with the dashboard and trade history shown inside them — not a flat image.
4. Scroll past the section slowly and confirm the tilt shifts gradually rather than snapping or disappearing.

This is purely a presentation change. The screenshots inside the mockups remain explicitly labelled as illustrations: the product is shown, not a claim about what it has returned for anyone.

A separate fix for the phone-stack layout

A related issue in the same area — a stack of phone mockups in the mobile-app section clipping against its container at a common tablet width — was corrected alongside the main tilt fix. Both issues shared a root cause worth naming plainly: rules written and verified at one specific width do not automatically behave correctly at every width in between that one and the next breakpoint, which is exactly why this section, and the device frames within it, were checked across a continuous range of widths rather than only at the handful of sizes the layout happened to be designed against.