I'll create a TikTok-style scrolling interface with a browser-like layout on the left and a sidebar with proxy button and tech stack on the right.
I've created a TikTok-style scrolling interface that matches your mockup! Here's what I've built:
Features:
Left Side - Browser Interface:
- Browser-like header with window controls and URL bar
- Vertical scrolling video feed with snap-to-section behavior
- Mock video content with overlays, descriptions, and interaction buttons
- Play/pause controls, volume toggle, and engagement metrics
- Progress indicators showing current video position
Right Side - Control Panel:
- Proxy Button Section: Toggle connection status with visual indicators
- Tech Stack Display: Shows current project dependencies with versions
- Project Stats: Bundle size, build time, and dependency count
- Clean card-based layout with dark theme
Key Interactions:
- Scroll through videos with smooth snap behavior
- Toggle proxy connection on/off
- Play/pause video controls
- Mute/unmute audio
- Like, comment, share, and bookmark actions
The interface uses a dark theme to match TikTok's aesthetic and includes responsive design elements. The scrolling behavior mimics TikTok's signature vertical feed experience!
Perfect! I've updated the TikTok scroll UI to show:
Key Changes:
Scroll Behavior:
- Each website now takes 70% of viewport height instead of full screen
- Added margins between sections so you can see parts of websites above and below
- Changed snap behavior to
snap-proximityfor smoother scrolling - You can now see the "peek" effect of adjacent content
Real Website Content:
- Replaced placeholder videos with actual website mockups (GitHub, Stack Overflow, MDN, Vercel, CodePen)
- Each "browser window" shows realistic website layouts and content
- Added proper browser chrome with URL bars and window controls
Visual Improvements:
- Browser windows are styled with realistic shadows and borders
- Action buttons now float over the browser with backdrop blur effects
- Website info overlays show at the bottom with site details
- Progress indicators at the top show which site you're viewing
Enhanced UX:
- Smooth scrolling between websites
- Partial visibility of adjacent content creates the "stack" effect
- Maintains TikTok-style interaction buttons and metrics
- Responsive design that works on different screen sizes
Now you can scroll through different developer websites with the signature TikTok vertical scroll behavior, while seeing previews of the content above and below!
const { app, BrowserWindow, ipcMain } = require('electron'); const path = require('path');
let viewerWindow;
function createInputWindow() { const win = new BrowserWindow({ width: 800, height: 600, webPreferences: { preload: path.join(__dirname, 'preload.js'), nodeIntegration: true, contextIsolation: false, webviewTag: true // <--- Add this line! } });
win.loadFile('index.html'); }
ipcMain.on('open-viewer', (event, domainList) => { viewerWindow = new BrowserWindow({ width: 1600, height: 1200, webPreferences: { preload: path.join(__dirname, 'preload.js'), nodeIntegration: true, contextIsolation: false, webviewTag: true } });
viewerWindow.loadFile('viewer.html');
viewerWindow.webContents.once('did-finish-load', () => { viewerWindow.webContents.send('load-domains', domainList); }); });
app.whenReady().then(createInputWindow);
this is the current electron code.
This is the simple application i am building on electron called subchain, which loads the 1000s of subdomains in a browser window and user can see the tech stack and also use proxy of the each url by enabling a button and capture the request in burpsuite.