Finest Plastering

Overview

Problem & Goals

Business: Present a premium plastering brand online with clear service and finish options, contact path, and trust (process, gallery, FAQ).
Differentiation: Let visitors preview plastering finishes in 3D and support a “scan your room” workflow (LiDAR/upload) via an installable app.
Production: Fast, secure, SEO-friendly site ready for Vercel and optional custom domain.

About this project

Solution & Features

Marketing website

Home: Hero with autoplay video, custom cursor (turns into “Play” over video), about, why choose us, services teaser, 3D preview section, process, projects, featured, who we are, gallery, FAQ, contact.
Services: 8 plastering services with images and copy (Skimming, Plasterboarding, Rendering, External Wall Rendering, Repairing Holes/Patching, Coving, Tyrolean Plastering, Floor Screeding). Two-column layout, large imagery.
Venetian Plastering: 8 finishes with high-quality images and descriptions (Polished Plaster, Marmorino, Metallic Paint, Concrete, Rock Wall, Rustic Finish, Micro Cement, Liquid Metal). Large image display.
Other pages: Contact Us (form + Google Map), Blog, Gallery, Training. Responsive layout and consistent typography (Playfair + Inter).

3D plastering preview

Upload: Users upload OBJ or GLTF 3D room/models.
Viewer: Interactive Three.js viewer (orbit, zoom). Model auto-centered and scaled.
Wall detection: Surfaces inferred from mesh normals; “walls” highlighted for finish application.
Finish application: Per-surface selection (click) and application of procedural plaster textures (traditional, Venetian, micro-cement). Option to “Apply to all walls.”
UX: Clear upload/remove controls, material palette, and scan-room CTA.

PWA & “Room Scanner”

PWA: Installable from the site; manifest and iOS meta tags set so the app opens on the Scan experience when launched from home screen.
Scan page (/scan): Camera access (back camera preferred), live preview, simulated scan flow, and guidance for using iPhone LiDAR apps (e.g. 3D Scanner App) and uploading the resulting file on the main site for 3D preview.
Link from site: “Install App to Scan Room” / “Scan Room with LiDAR” from the 3D section links to /scan and supports install prompt when available.

UX & polish

Custom cursor: Circular cursor on desktop; over hero video it becomes a “Play” button; color adapts to background (e.g. dark/light) for visibility.
Video modal: Clicking play on the hero opens a fullscreen modal player (keyboard close, focus handling).
Animations: Framer Motion for section reveals, hovers, and transitions across the site.
Content protection: Optional client-side measures (right-click, selection, drag, copy shortcuts disabled) for marketing content.

Production & SEO

Performance: Next.js Image optimization, video preload/autoplay, code-split 3D viewer (dynamic import, no SSR for Three.js).
SEO: Metadata and Open Graph per route, robots.txt, sitemap, semantic structure.
Security: Security headers (CSP, HSTS, X-Frame-Options, etc.) in next.config.js and Vercel.
Deployment: Vercel with vercel.json (install command, headers); docs for env vars and Git-triggered deploys.

Tech Stack

| Layer | Technology | |-------|------------| | Framework | Next.js 14 (App Router) | | Language | TypeScript | | Styling | Tailwind CSS | | Animation | Framer Motion | | 3D | Three.js, React Three Fiber, Drei (OBJ/GLTF loaders, OrbitControls, procedural textures) | | Hosting | Vercel | | Version control | Git / GitHub |

Technology stack

Next .js
Typewriter
Framer Motion

Finest Plastering – Case Study