BrowserMoon App templatesShader collection app screen

Shader collection app screen template

An animated app home screen with live shader cards and a spectrum dial. Two glossy silk gradient cards move in real time, and dragging the dial shifts the colours of the whole collection. Use it for wallpaper apps, design asset libraries, music and art apps, or any iOS or Android app that sells a visual collection. Built for Bolt, Lovable, Replit and Cursor.

Home App templates

About this app template

Most collection screens are a static grid of thumbnails. This one moves. Two satin silk cards, one blue and one red, are rendered live with WebGL shaders and cut into an hourglass shape that frames the collection. Under them sits a drag dial with tick marks: turn it and the hue of every card shifts across the spectrum, so people play with the product before they buy it. The dial works with touch, mouse and arrow keys, and the animation stops for people who turn on reduced motion. The screen is one HTML file at phone size. Paste it into Bolt, Lovable or Replit, or save it in your repo and ask Cursor or Claude Code to turn it into a React Native, Expo or SwiftUI screen. Swap the title and caption for your own collection, and keep the shader cards or replace them with your own product art.

Build a full mobile app with this template design

A home screen carries the type scale, spacing, and card style a user sees more than any other surface, so it can set the standard for every screen after it. Copy the template, paste it into Claude Code, Replit, Lovable, ChatGPT Codex, Bolt, or Cursor, and send this alongside it.

Paste into Claude Code, Replit, Lovable, Bolt, or Cursor

Common questions about this template

Are the gradients in this app screen animated?

Yes. Both cards are live WebGL shaders that loop smoothly, so the silk folds and highlights move in real time. A still frame is shown when the device asks for reduced motion.

What does the dial on this screen do?

Dragging the dial, or using the arrow keys, rotates the hue of the shader cards so the whole collection shifts colour. When nobody touches it, the needle drifts slightly to show it can be moved.

Can I use this screen in React Native or SwiftUI?

Yes. Save the file in your project and ask Cursor or Claude Code to convert it. In React Native the shaders run with react-native-skia or expo-gl; in SwiftUI they run as Metal shaders with the same colours and motion.

Will live shaders slow down my app?

One shared WebGL canvas draws every card, so the screen stays light. On older phones you can lower the resolution or pause the animation when the screen is not visible.