Aysegul Karadan
Creative Full-Stack Developer
New to Contra
Aysegul is building their profile!
3D Spiderman Landing Page
1
5
NEBULA 3D: Interactive Landing Page for Elementor & WordPress
The Industry-Standard Interactive 3D Landing Page.
Stop settling for static layouts. Nebula 3D is a high-performance, scroll-synced immersive environment designed for high-end tech brands and SaaS leaders.
Live Demo (https://live-nebula-3-d-landing.pantheonsite.io/)
Core Mechanics
Dynamic Scroll Engine: Real-time 3D nebula density and opacity mapped to user scroll depth.
Performance Optimized: Pure Three.js implementation ensuring stable 60FPS on both Desktop and Mobile.
Advanced Glassmorphism: Production-ready CSS layer with frosted blur, glow-pulse animations, and metallic typography.
Developer-First: Clean, modular code. Zero dependencies beyond Three.js.
What’s in the Box?
Core 3D Source: Standalone Three.js scene (nebula.html).
Sync Logic: Optimized WordPress/Elementor scroll controller script.
UI Framework: Premium Glassmorphism CSS kit.
Quick Start: Technical documentation for < 5 min deployment.
1
12
The Starry Night — Interactive Animated Background for Framer
The Industry-Standard Interactive Animated Background Engine.
Stop settling for static gradients and looping stock videos. Starry Night Living Canvas is a high-performance, cursor-reactive immersive background built for creative agencies, luxury portfolios, art galleries, and premium Framer sites.
LIVE DEMO (https://thestarrynightbackground.framer.website/)
Elevate Your Hero Section
Whether you are launching a creative portfolio, a cultural brand, or a high-end product page, Starry Night delivers the visual depth and tactile feedback that separates elite websites from the rest. Not a wallpaper. Not a video. A living painting.
Core Mechanics
Painterly brush engine — Thousands of flowing strokes sampled from Van Gogh’s Starry Night palette. The sky breathes with continuous, organic spiral and swirl motion.
Cursor-reactive physics — Your visitor’s mouse pushes and scatters brush strokes in real time. The canvas feels alive, not decorative.
3D cypress tree overlay — A swaying foreground tree rendered in WebGL adds cinematic depth and parallax without leaving your Framer page.
Cinematic cursor lens — Optional glass lens + ring follow the cursor for a premium, editorial interaction layer.
Framer-native controls — Drag, drop, and tune stroke width, glow, path speed, swirl speed, mouse radius, push force, lens size, and more — no code required.
📦 What's in the Box?
✅ Framer Code Component — StarryNightBackground.tsx with 12 property controls
✅ Quick start — Paste into Assets → Code, place full-screen, publish in minutes
✅ License — Use on unlimited Framer projects (personal & commercial)
Technical Specs
Platform: Framer (Code Component)
Delivery: Single .tsx file — paste into Assets → Code
Hosting: None required — runs entirely in Framer
Interaction: Mouse-reactive brush repulsion
3D layer: WebGL cypress tree with wind sway (dual-layer silhouette)
Performance: Adaptive particle budget, dual-canvas rendering, lazy scene load
Modes: Opaque & transparent background for layering over any layout
Dependencies: Framer built-ins only (framer, framer-motion) Customization: 12 Framer panel controls
Perfect For
Creative & design agency portfolios
Art galleries & cultural institutions
Luxury / fashion landing pages
Immersive hero sections that need to feel unforgettable
Framer creators who want a living background, not another static block
How It Works
Copy the Code Component into Framer (Assets → Code).
Place the component full-screen at the back of your page.
Add your text, buttons, and content on top.
Tune motion and interaction from the Framer properties panel.
Publish.
The background runs as a full-screen layer. Your Framer content stays in front. Your site becomes the frame; Starry Night becomes the art.
WonderCoder — Interactive experiences for designers who refuse to settle for static.
2
25
Stop struggling with complex backdrop filters and borders. Wdr Glass Button is a production-ready, ultra-premium glassmorphic button component built native for Framer. Designed with a clean, raw-white frosted glass aesthetic, it blends perfectly into any modern hero section, portfolio, or dark-mode design. It is fully adaptive, looking stunningly vibrant over colorful dynamic backgrounds, complex gradients, or rich imagery.
Live Preview (https://glassbuttonwondercoder.framer.website/)
✨ Pure Glass Aesthetic:High-end raw-white translucent finish with realistic edge refraction.
⚡ Production-Ready States:Pre-configured, buttery-smooth interactions forDefault,Hover, andPressed (Click).
🎨 Fully Customizable:No code required. Change text, borders, padding, and blur values in seconds directly from the Framer sidebar.
🚀 Future-Proof:This is the base v1.0 (Raw White Edition). Colorful aurora and liquid gradient variants are coming soon as a free lifetime update directly to your Gumroad library!
2
34
Neon Glowy Button — Premium Framer Button Component
Bring a striking contrast to your modern dark-mode interfaces. The Neon Glowy Button is a production-ready Framer component meticulously engineered for ultimate performance and visual impact. Featuring a crisp layout and a deep neon ambient shadow, this element provides your users with satisfying tactile feedback while maintaining a high-end, premium aesthetic.
✨ Key Features:
Vibrant Neon Glow: A beautifully diffused, multi-layered yellow ambient light effect that creates absolute depth on dark interfaces.
Interactive Micro-interactions: Built-in dynamic states for both Hover and Click actions, offering immediate responsiveness.
100% Code-Free & Optimized: Created entirely using native Framer features—no layout shifts, zero clipping, and lightweight performance.
2
40
Prism Sphere — Interactive Glass Orb Framer Background Component
🧊 WHAT IT IS
Prism Sphere is a WebGL background component for Framer. It renders a real 3D sphere made of small triangular prisms with a physically based (PBR) glass material — refraction, clearcoat, fresnel, and environment reflections.
Scroll-reactive: The triangles separate and recombine as the page scrolls.
Works without scroll too: On a static page it simply sits at its Initial Gap and slowly auto-rotates. Scroll is an optional enhancement, not a requirement.
Realistic glass material: PBR shading (Cook-Torrance), transmission, clearcoat, tone mapping.
ZERO dependencies: Raw WebGL, no Three.js, no external libraries, no iframe. Pastes straight into Framer.
Fully themeable: Single color or two-tone gradient, mesh lines, lighting direction, position, zoom, and more.
📜 DO I NEED SCROLL?
No. The component is fully usable on any page:
Static hero / background: Set Rotation for a gentle spin and leave Scroll Effect at 0 (or just don’t scroll). The sphere holds a clean, solid look.
Pre-split look: Increase Initial Gap to show the prisms permanently exploded — no scroll needed.
Scroll storytelling: Place it as a sticky/full-height background and the triangles will open up as visitors scroll. (See Scroll setup below.)
🎭 STYLES & MATERIALS (Two quick dropdowns)
Mix and match a Style (colors + background) with a Material (surface look). Set either to Custom to unlock its individual controls.
STYLE — COLOR THEME + BACKGROUND
Hologram: Techy cyan → violet on deep navy.
Blueprint: Cool blue tones on dark blue.
Aurora: Soft pink ↔ aqua on dark purple.
Custom: Pick your own Color A / B, mesh lines, etc.
MATERIAL — PHYSICAL SURFACE
Glass: Clear see-through glass with a glossy coat.
Metal: Brushed, reflective metallic surface.
Chrome: Mirror-like fully metallic chrome.
Crystal: Almost fully transmissive, razor-sharp highlights.
Matte: Soft clay / plastic, no reflections.
Neon Wire: Hollow — only the glowing edge lines, empty inside.
Custom: Tune roughness, metalness, transmission, clearcoat yourself.
Shape, scroll, lighting, and position controls stay available in every combination.
🛠️ QUICK START (Choose Your Way)
METHOD 1: THE 1-CLICK REMIX (Recommended)
Open the Remix Link provided in your purchase download.
Click "Copy project to your account" to open the live preview scene.
Simply copy the pre-configured Prism Sphere layer and paste it directly into your own project!
METHOD 2: MANUAL CODE PASTE
In Framer, open Assets → Code and create a new code component named PrismSphere.tsx.
Paste the full source code included in your download.
Drag Prism Sphere from your Assets panel onto the canvas.
Resize it to fill your section (e.g. 100% width / 100% height) and send it behind your content.
💡 TIP: For a background, set the frame to Fill and place your text/content in a layer above it.
🌀 SCROLL SETUP (Optional, for the split effect)
To make the triangles open up on scroll:
Put the Prism Sphere inside a tall section (e.g. a section that is 200vh+ in height).
Set the parent section's Overflow to VISIBLE.
Set the sphere’s own frame to STICKY position, 100vh height, and Top to 0px so it stays pinned while the section scrolls past.
The split intensity is driven by: page scroll progress × Scroll Split × Scroll Effect. The further the visitor scrolls, the wider the prisms separate — then they recombine as they scroll back.
🎛️ CONTROLS (29 Properties in Total)
The right panel gives you total creative freedom. Here is a quick breakdown of what you can control:
PRESETS: Swap themes instantly with 4 Styles (Hologram, Blueprint...) and 6 Materials (Glass, Chrome, Neon Wire...).
SHAPE & 3D: Adjust the sphere's size, triangle density, and 3D prism thickness.
MOTION & SCROLL: Control the auto-rotation speed and tune exactly how far the prisms separate when users scroll.
COLOR & LIGHT: Pick custom gradient colors, toggle edge lines, and move the 3D studio light position in real-time.
PBR MATERIAL: Fine-tune advanced properties like glass roughness, metallic reflections, transparency, and clearcoat gloss.
POSITION: Move the sphere anywhere on the canvas (X/Y offsets) and adjust the camera zoom.
🎨 DEFAULT LOOK
Out of the box you get a modern blue → cyan glass orb on a dark background, lit from the top-right, slowly rotating, centered. Just drop it in and it looks great — every value is tuned as a perfect starting point you can override.
⚙️ PERFORMANCE & COMPATIBILITY
Renders with RAW WebGL — ultra fast and lightweight.
Smart Pause: The animation pauses automatically when off-screen (via IntersectionObserver) to save battery and CPU.
Clean Fallback: Displays a beautiful gradient if WebGL is unavailable on older browsers.
Works natively in modern browsers; no build step, no external assets required.
1
31