Oblique

Independent creative studio

Description

Oblique is a single-page site for a made-up creative studio. The homepage is one endless WebGL grid of work that you drag around, bulging toward you like a lens; cards lift under the cursor and play silent clips in place. Around the work everything is black, off-white and grey, so the projects are the only colour. Studio, Careers, Contact and project pages slide up over the grid, and a list view offers the same work to keyboard users.

Use it for:

a portfolio for a design, branding or web studio
a showcase with many projects that should feel explorable
a reference for a draggable, curved WebGL gallery with no libraries

Workflow

Open Claude Code
Install Claude Code, open a terminal in an empty folder and run claude. Pick Claude Opus 5 with the /model command.
Paste the prompt
Copy the prompt on this page and send it as your first message. Claude writes the HTML, CSS and JavaScript, including the WebGL grid.
Get photos and clips
Download 16 project photos and a few short clips from Pexels and Unsplash. Install ffmpeg so Claude can trim the clips to 8 seconds and resize everything.
Preview and fix
Ask Claude to start a local preview. Drag the grid, open a few projects and try the list view, then ask for one fix per message.
Publish on GitHub Pages
Ask Claude to push the folder to a new GitHub repository. Then open the repository's Settings, choose Pages and deploy from the main branch.

Main prompt

Build a website for Oblique, an independent creative studio doing branding, web design, development and marketing. Use plain HTML, CSS and JavaScript in three files with no libraries and no build step, and make it run when index.html is double-clicked.

The homepage is the work: one endless, draggable WebGL grid of project cards that bulges toward the viewer, so the middle stays flat and the edges swell. Each card has a title strip, a photo or a silent video clip, and a row of service pills. Drag with momentum, or scroll and use the arrow keys to move around; fast drags add a slight colour split and the edges fade to black. Hovering a card lifts it and turns the cursor into a "View" pill. A filter fades the cards that don't match.

Design: black page, off-white text and greys, and dark glass panels. No accent colour, so the projects are the only colour on the site. Inter Tight for headlines and text, Geist Mono for small uppercase labels. Logo: a circle split along one slanted line.

Float a glass header (logo, one-line description, live Lisbon clock, "Let's talk") and a glass dock (Work, Studio, Careers, Contact, a grid/list switch and the filter) over the grid.

Loader: the logo halves slide together, a few project clips appear around it, then everything flies out and the grid zooms in.

Pages slide up over the grid, and Escape closes them:
- Studio: facts, black and white photos, a statement that lights up as you scroll, services, stats and a client ticker.
- Careers: five open roles.
- Contact: a big "Let's talk", details that copy on click and an enquiry form.
- Each project: title, details, media, a result and a link to the next project.

Keep all 16 projects in one array at the top of the script. Add a list view of the same projects for keyboard and screen reader users, used automatically when WebGL isn't available. Respect reduced motion and keep the whole site light.