TL;DR
FABLE/175 has released Abyssal Station, an AI-built web experience that maps scrolling to a simulated 3,800-meter ocean descent. Its published design brief describes a custom JavaScript depth engine, canvas animation, accessibility controls and a three-pass production process, although independent performance data and detailed AI-development records are unavailable.
FABLE/175 has released Abyssal Station, an AI-built interactive website that converts a visitor’s scrolling into a simulated 3,800-meter ocean descent. The project, identified as Room 6 of the 175-site exhibition, uses a central JavaScript depth calculation to coordinate lighting, color, data displays and animated sea life, offering a documented example of how an AI-directed production pipeline can create a complex web experience without frameworks or external assets.
The published art-direction brief defines the page itself as the descent. A fixed depth meter counts upward as the visitor scrolls, while the background moves from surface teal to near-black. The same depth value controls simulated pressure, available light, zone labels and the appearance of creatures associated with different parts of the ocean.
According to the exhibition’s account, a master scroll anchor measures the visitor’s position and feeds that value to dependent systems through JavaScript interpolation. Those systems include lighting decay, particle drift and creature animation. Canvas-rendered fish, jellyfish, an anglerfish and amphipods appear at assigned depths, while marine snow and other particles reinforce the sensation of downward movement.
The implementation brief calls for pure HTML, CSS and JavaScript, with no frameworks, build step, content-delivery networks or external requests. It also specifies self-hosted fonts, keyboard navigation and visible focus states, alongside a reduced-motion mode. Animation loops are supposed to pause when the browser tab is hidden, and particle counts are capped with the stated aim of maintaining 60 frames per second.
One Depth Value Controls Everything
Abyssal Station matters as a demonstration of coordinated interaction design. Instead of running unrelated effects at fixed points on a page, the project connects visual and informational changes to one simulated depth value. That approach can make a long scrolling experience feel continuous because every component responds to the same underlying measurement.
The release also provides a visible case study for developers tracking AI-assisted front-end production. FABLE/175 says the room was created end to end by AI through its pipeline, while the exposed brief shows the level of direction supplied to that system. The result suggests that detailed constraints and repeated critique may play as large a role as code generation in producing a coherent interactive site. That conclusion remains an interpretation, not a measured finding.
interactive ocean depth simulation website
As an affiliate, we earn on qualifying purchases.
As an affiliate, we earn on qualifying purchases.
Room Six in a 175-Site Exhibition
Abyssal Station is part of FABLE/175, which describes itself as a completed exhibition of 175 distinct AI-built websites. Each room explores a separate visual identity or interaction model. The source identifies nearby entries including HELIOS, FOLIUM and KINETIKA, placing Abyssal Station within a wider experiment in AI-generated web design.
The source credits the original brief to Claude Fable 5 as art director and says the FABLE/175 pipeline executed it. Production reportedly followed three documented passes: an initial build and self-critique, an external critique required to identify at least 10 problems, and a final art-direction pass. Screenshots at 390, 834 and 1,440 pixels were requested during every pass.
“The page IS a descent.”
— FABLE/175 art-direction brief
Animation in html, css, and javascript
As an affiliate, we earn on qualifying purchases.
As an affiliate, we earn on qualifying purchases.
Performance and AI Records Are Missing
The supplied material does not include independent performance tests, accessibility audit results or browser-compatibility data. The brief sets targets such as 60 frames per second, zero horizontal overflow and body-text contrast of at least 4.5:1, but it is not clear whether every target was formally verified across the listed devices and browsers.
The account also does not specify which AI models produced individual code revisions, how much human editing occurred or what changed during each critique pass. The attribution to Claude Fable 5 covers the original art direction, but the available source does not provide versioned prompts, code history or evaluation logs that would allow outsiders to reconstruct the full production process.
scroll-driven web experience development kit
As an affiliate, we earn on qualifying purchases.
As an affiliate, we earn on qualifying purchases.
Live Testing Will Show Its Limits
The immediate next step is testing the live room across mobile, tablet and desktop hardware. Frame-rate measurements, keyboard-only use and reduced-motion checks would show whether the final build meets the performance and accessibility targets stated in its brief.
Further publication of build notes and critique records could clarify how the AI-generated implementation changed across the three production passes. FABLE/175 is also continuing its room-by-room coverage, which may provide additional comparisons across the exhibition and show whether the shared pipeline produces similarly detailed results under different art directions.
Animation in html, css, and javascript
As an affiliate, we earn on qualifying purchases.
As an affiliate, we earn on qualifying purchases.
Key Questions
What is Abyssal Station?
Abyssal Station is a single-page interactive website designed as a fictional deep-sea research mission. Scrolling controls a simulated descent to 3,800 meters, changing the page’s lighting, color, pressure data and animated marine life.
How does the scroll-driven depth engine work?
A master scroll measurement is converted into a virtual depth value. JavaScript then interpolates that value across background colors, light levels, interface readings and canvas animations, keeping the effects synchronized.
Was the website entirely created by AI?
FABLE/175 says it was built end to end by AI through its production pipeline, from an art-direction brief credited to Claude Fable 5. The supplied source does not document the amount of human review or editing, so the precise division of work cannot be independently established.
Does the experience support accessibility preferences?
The brief requires keyboard navigation, visible focus styling and reduced-motion behavior, plus minimum contrast and tap-target sizes. No independent audit results were supplied, leaving final compliance unconfirmed.
Does Abyssal Station use external images or frameworks?
According to the project brief, the room uses no frameworks, external requests or image assets. Its visuals are generated through CSS, SVG and canvas code, with fonts hosted locally.
Source: Thorsten Meyer AI
