Creative 3D Web & AI Eng. Breaking Browser's Absolute Limits
- 5.0
- Rating
- 32
- Followers
Creative 3D Web & AI Eng. Breaking Browser's Absolute Limits
EIDOLON: A museum of lost things, rendered in dust (https://jsfiddle.net/Saminsami/vbumrf4o/1)
I built this to see if I could make a point-cloud museum that moves with your mouse and still stays smooth at 60 FPS without any framework. No libraries. No build steps. Just Canvas2D and a bunch of tiny floating lights.
WHAT I WAS TESTING:
I was testing how well I could keep point-cloud rendering alive under constant user motion while keeping the frame rate locked at 60. The system had to handle hundreds of thousands of points updating every frame, and I had to make sure the browser didn’t stutter from garbage collection or event throttling.
THE TECHNICAL SIDE:
Everything runs in the browser with Canvas2D. No WebGL. No Three.js. No external dependencies. I wrote custom shaders with GLSL to color and animate the point clouds. I hand-tuned the event loop to avoid frame drops during mouse moves, and used requestAnimationFrame with manual frame pacing to stay at 60. Memory is allocated per object and recycled on demand. No global state leaks. No third-party tracking.
WHAT I LEARNED:
The key was not making the math too tight or too loose. Too tight and the browser would freeze. Too loose and the frame rate would drop. I learned to profile frame times, adjust point update rates based on user velocity, and use a simple debounced event handler to keep mouse movement from overwhelming the system. It runs at 60 on an old laptop, and feels buttery on a mid-tier machine.
TRY IT YOURSELF:
(https://jsfiddle.net/Saminsami/vbumrf4o/1)Open it in your browser, it's hosted live on my JSFiddle. Move the mouse around. Watch how the clouds react. No lag. No freeze. No framework.😊
14
15
3.5K
SaminOS: A Full Operating System Stored in a Single Molecule of DNA (https://github.com/Saminsami73/SaminOS_DNA)
Creator: Samin Sami (Samin Yasar Al Sami)
The Story Behind the Project:
Hey there, first off sorry for being this delay in posting projects on Contra. Well in my Contra profile I had uploaded and shown numerous love towards browser based Operating systems. We had seen a famous Vanilla based Win 95 (https://win95bysamin.netlify.app). A perfect retro functioning operating system running in your browser. Then I thought it would be more crazier to have AetherOS (https://aetherosbysamin.netlify.app), an AI agent based operating system running in a single HTML based file system! This year I decided I would build something different, something unique. Most operating systems today are massive. Windows and macOS take up tens of gigabytes of disk space and require gigabytes of memory just to show an empty desktop. Even a simple program usually carries megabytes of hidden background code.
I wanted to find out how small a real, interactive operating system could be.
I set a hard rule for myself: everything had to fit inside 512 bytes. That is the exact size of a single Master Boot Record sector on a computer hard drive. There is no room for bloat, third-party libraries, or sloppy instructions. Every single byte has to fight for its place.
I wrote SaminOS in raw 16-bit x86 assembly language. When a computer turns on, its motherboard BIOS looks for the first sector of a disk, checks for a two-byte signature at the end, and loads the code directly into memory address 0x7C00. SaminOS takes full control of the machine from that exact moment.
It does not just print a single line and freeze. SaminOS boots an interactive command line with a live blinking prompt. It draws a four-line bold ASCII art logo. It includes a keyboard driver that handles keystrokes, buffers characters in memory, and erases letters cleanly when you hit backspace. It reads the motherboard real-time clock chip, converts raw decimal numbers, and displays the local time in Dhaka. It gives you six working commands: help, info, time, say, cls, and reboot.
The entire system takes up 508 bytes of machine instructions and text, leaving two empty padding bytes and the two-byte boot signature. Exactly 512 bytes.
Then I realized something much bigger: that 512-byte operating system could live inside biology.
How Code Turns into DNA:
Computers think in binary numbers: 0 and 1. Living cells think in genetic letters: Adenine (A), Cytosine (C), Guanine (G), and Thymine (T).
Because there are four genetic bases, each letter can store exactly two binary bits:
- 00 becomes A
- 01 becomes C
- 10 becomes G
- 11 becomes T
Every byte of computer data contains eight bits. In my encoding system, each byte turns into a short four-letter genetic word. For example, the hex byte 0x55 (which is 01010101 in binary) turns into the letters CCCC. The hex byte 0xAA (which is 10101010) turns into GGGG.
Because SaminOS is exactly 512 bytes long, the entire operating system translates into an exact strand of 2,048 DNA base pairs.
This number changes everything.
When large tech companies store data in DNA, such as movies or research archives, the files are millions of bytes long. Chemists cannot easily synthesize a million-letter strand of DNA in one piece. They must chop the data into thousands of tiny, scrambled fragments, store them in a pool, and rely on complicated mathematical algorithms to piece them back together later. If one piece gets lost, the whole file can break.
SaminOS does not have to be chopped up. In nature, 2,048 letters is the normal size of a single bacterial gene. That means SaminOS exists as one single, unbroken, continuous strand of DNA.
The entire bootloader, the kernel, the command engine, the clock math, the prompt, and the author metadata all fit onto one molecular polymer.
From a Glass Tube to a Laptop Screen:
People often ask: how can clear liquid in a tube run on a computer screen?
The link between biology and hardware works in five clear steps:
1. Digital Compilation: A Python tool reads the 512-byte binary file of SaminOS two bits at a time. It maps each pair to A, C, G, or T, producing a 2,048-letter text sequence.
2. Chemical Synthesis: A DNA synthesizer prints the sequence. Instead of paper and ink, it links real molecules together, base by base, building physical double-helix strands floating in purified water.
3. Biological Storage: The dry DNA forms an invisible salt crystal, or dissolves into clear water. A single molecule of SaminOS is only 696 nanometers long and weighs 1.26 attograms. That is so small that a single drop of water can hold billions of complete copies of the operating system.
4. Nanopore Reading: To boot the system, you pipette a tiny droplet of the liquid into a portable DNA sequencer, like an Oxford Nanopore MinION. This device is smaller than a smartphone and plugs directly into a laptop via USB. Inside the device, an electrical current pulls the DNA strand through a microscopic protein pore. As each letter passes through, it creates a distinct dip in the electric current.
5. Silicon Boot: Software on the laptop reads those electric signals and turns them back into the original 512 bytes of machine code. A script loads those bytes into Sector 0 of a virtual drive or USB flash stick. The computer BIOS checks the last two bytes, confirms the 0x55AA boot signature, loads the code into RAM at 0x7C00, and boots SaminOS live on screen.
Molecular Surgery: Using Enzymes as Hardware Switches:
Because the computer instructions map directly to physical genetic letters, we can do something impossible with ordinary silicon: we can modify software using biology.
In molecular biology, scientists use restriction enzymes. These are natural biological proteins that act like microscopic scissors. Each enzyme looks for one specific pattern of genetic letters and cuts the DNA strand at that exact spot.
When we map SaminOS into DNA, our assembly instructions accidentally create real recognition sites for known enzymes:
-SmaI and XmaI (They are the Boot Switch): The x86 boot signature 0x55AA translates into CCCCGGGG at base pairs 2041 to 2048. Both SmaI and XmaI cut the sequence CCCGGG. If you add SmaI to the vial, it snips the strand right inside the boot signature. It does not touch any of the commands or code, but the computer BIOS will refuse to boot the disk. It acts like a biological write-blocker or kill switch.
- NsiI (The Keyboard Lock): At base pair 100, NsiI cuts right where the code calls the BIOS keyboard interrupt. Adding this enzyme physically unplugs the keyboard handler at the molecular level.
- AseI, PmlI, and MscI (The Clock Cutters): All three enzymes cut inside the mathematical routine that decodes the motherboard real-time clock.
- AgeI and SalI (The Dhaka Marker): Bases 1989 to 2008 spell out the word "Dhaka" in ASCII. The letters of the city name form the exact cutting site for AgeI and SalI. Dropping these enzymes into the tube cuts the geographic origin marker out of the code.
- StuI (The Banner Cutter): This enzyme cuts through the exact middle of the ASCII art startup logo.
You do not need a compiler or a hex editor to disable features. You can modify the binary using drops of liquid on a laboratory bench.
Why I did this:
This project is not just a technical puzzle. It points toward solutions for real problems in computing:
1. Storage That Lasts for Millennia: Modern hard drives fail within ten years. Magnetic tapes degrade. Flash memory loses charge. Synthetic DNA stored in tiny glass beads can last for tens of thousands of years at room temperature with zero electricity. SaminOS proves that executable software, not just static text or images, can be archived for deep time.
2. Extreme Data Density: DNA can store more information per cubic millimeter than any silicon chip known to science. All 512 bytes of SaminOS fit into an object smaller than a wavelength of visible light. You could pack copies for every person on Earth into a single drop of liquid.
3. Living Servers: Because 2,048 base pairs is the size of a normal gene, you can insert SaminOS into a harmless bacterium like E. coli. As the bacteria feed on basic nutrients, they duplicate the operating system billions of times without drawing power from an electrical wall outlet.
4. Absolute Physical Security: A vial of SaminOS has no radio antenna, no network card, and no electrical emissions. It cannot be scanned through an airport X-ray or intercepted across the internet. It exists outside the electromagnetic spectrum until it is sequenced.
What This Project Demonstrates:
SaminOS shows what happens when low-level assembly language meets synthetic biology. It demonstrates:
1. Deep mastery of bare-metal x86 architecture, memory layouts, and hardware interrupts.
2. Clean algorithm design under a strict 512-byte constraint.
3. Creative cross-disciplinary engineering linking computer science, information theory, and molecular genetics.
4. Clear communication that turns complex biocomputing concepts into accessible, human ideas.
Ref and Source Links:
1. SaminOS Research at Zenodo: https://doi.org/10.5281/zenodo.23554876
2. SaminOS Github Repo with all tools and resources : https://github.com/Saminsami73/SaminOS_DNA
3. A 61 Page Guidebook of SaminOS DNA : https://github.com/Saminsami73/SaminOS_DNA/blob/main/SaminOS_Complete_Guidebook.pdf
4. SaminOS Main Research paper : https://github.com/Saminsami73/SaminOS_DNA/blob/main/SaminOS_Research_Paper_v2.pdf
22
15
8.3K
LONGWAVE: Interactive UV Mineral Cabinet and Fluorescence Archive (https://samincollection2.netlify.app/fluorspar/)
I built this speculative mineral cabinet to simulate ultraviolet fluorescence and light-wavelength transitions directly in the browser inside a clean interactive UI.
Users can flip the cabinet lamp between 5500K daylight and 365nm longwave UV to watch dull, grey stones instantly catch fire. The system catalogs seven fictional specimens from Verdigrite to Duskbloom mapping out their host lattices, trace metal activators, emission wavelengths (from 416nm cold violet to 640nm rose pink), and seam localities. If you switch the lamp back to daylight, the borrowed photon energy cuts off immediately, while specimens like Sporewort hold a brief half-second phosphorescent linger before going dark.
Everything runs on the client side using JavaScript, CSS, and HTML5. The stone visuals, wavelength states, and spectrum plots render locally in the browser without relying on heavy external assets or server calls. The page updates the crystal glow, the three step photon excitation breakdown, and the spectral chart in one pass. I even included a control specimen called Nullstone with zero trace activators. So when someone flips on the UV lamp, it stays completely dark and inert instead of faking a glow.
The ragebaiting part was to format and structure out the mineralogy lore and wavelength data so it felt clean and fast. Putting the activator traces, nanometer readings, and locality codes right beside each stone makes it easy to read the numbers while looking at the crystal glow. No distractions. Showing the emission spectrum chart at the bottom also helps visitors see where every specimen sits on the visible band before cutting the lamp.😊
22
23
3.2K
NOCTURNE: Red-eye flights for the sleepless (https://samincollection2.netlify.app/nocturne)
Steer an endless night-flight over a procedural city. NOCTURNE is a night-flight airline for insomniacs. An infinite procedural city passes beneath the wing. Steer with your mouse. Built by Samin Sami.
I built this project to test Steer an endless night-flight over a procedural city. NOCTURNE is a night-flight airline for insomniacs. An infinite procedural city passes beneath the wing. Steer with your mouse. Built by Samin Sami. The core engineering challenge was sustaining uncompromised 60 FPS rendering using Three.js (GLB 3D) while handling continuous user interaction without framework overhead.
WHAT I WAS TESTING:
I focused on two core engineering benchmarks:
Precision implementation of infinite world under continuous interactive user input
Sustained 60 FPS render performance and zero-dependency browser execution
THE TECHNICAL SIDE:
Engineered directly in the browser with Three.js (GLB 3D), Canvas2D, Infinite world. The application runs without third-party frameworks or build-step dependencies, using hardware-accelerated rendering and custom event loops to achieve zero-latency response.
Everything executes in the browser using Three.js (GLB 3D), Canvas2D, Infinite world. No third-party frameworks, no heavy runtime bundles, and zero external tracking.
WHAT I LEARNED:
Balancing the mathematical rigors of infinite world with tactile browser interaction required tuning event throttling and memory allocation to eliminate all garbage collection stutters.
Finding the sweet spot between mathematical precision and frame budget took careful profiling, but the result runs at a steady 60 FPS even on modest hardware.
TRY IT YOURSELF:
(https://samincollection2.netlify.app/nocturne)The live build is deployed on Netlify. Open it in your browser, test the controls, and observe the render response times.
If you are building high-performance 3D, physics, or creative web systems and want to collaborate, reach out here on Contra.
15
21
3.9K
Addicted to Advanced Custom Product Design
- 1x
- Hired
- 5.0
- Rating
- 358
- Followers
Addicted to Advanced Custom Product Design
UI/UX Designer | Framer and Wix Studio Expert
UI/UX | Full Stack Web Developer | WordPress,Webflow Expert
- 6
- Followers
UI/UX | Full Stack Web Developer | WordPress,Webflow Expert
Blog Website Conversion & SEO Architecture: Raptors Cleaning | Luxury Property Maintenance
Raptors Cleaning (https://www.raptorscleaning.com/) is an elite, luxury-tier residential and commercial property maintenance brand operating across the Greater Toronto Area (GTA). Specializing in high-end services like custom window detailing, advanced eavestrough repair, and premium power washing, their brand relies heavily on projecting absolute trust, precision, and top-tier service quality to local homeowners.
The core mandate for this project was a comprehensive Blog Website Conversion. The client needed to evolve from a standard digital storefront into a dynamic, SEO-powered content hub. Because they operate in a highly competitive local service market, the primary objective was to engineer a platform capable of seamlessly handling high volumes of educational content while actively driving local lead generation and high-value service bookings.
0
137
Next-Generation Cybersecurity & Training Platform Showcase
I executed the requirement-based design, advanced front-end animation, and custom development for Sycurus, a cutting-edge digital ecosystem dedicated to enterprise-level cybersecurity awareness, asset testing, and automated compliance training. The primary objective was to translate abstract digital security concepts, live network risk monitoring, and multi-tier training workflows into a high-impact, premium visual narrative that instantly communicates absolute digital defense and trust.
By strict adherence to defined layout and user-experience criteria, I engineered a bespoke web presentation layered with precise interface flows, sleek graphic frames, and hardware-accelerated scroll interactions.
0
190
🚀 Interactive Web Design & Animation: Sycurus (https://mdmosharafhossain.com/all-works/sycurus/)
I executed the requirement-based design, advanced front-end animation, and custom development for Sycurus, a cutting-edge digital ecosystem dedicated to enterprise-level cybersecurity awareness, asset testing, and automated compliance training. The primary objective was to translate abstract digital security concepts, live network risk monitoring, and multi-tier training workflows into a high-impact, premium visual narrative that instantly communicates absolute digital defense and trust.
By strict adherence to defined layout and user-experience criteria, I engineered a bespoke web presentation layered with precise interface flows, sleek graphic frames, and hardware-accelerated scroll interactions.
0
206
Interactive Web Design & Animation: 2020 Giving Tracker (https://mdmosharafhossain.com/2020-giving-tracker/) || Philanthropic Data Visualization Platform
I executed the requirement-based design, advanced front-end animation, and custom development for the 2020 Giving Tracker, a dedicated digital platform designed to track, aggregate, and visualize high-impact philanthropic contributions and total contributors. The core objective was to transform static financial and donation datasets into an engaging, premium, and highly interactive visual narrative that honors contributors and highlights real-time milestones.
By anchoring the build in strict presentation and layout requirements, I engineered a bespoke web interface that balances clean, data-focused clarity with sophisticated, fluid motion.
0
184
Web designer & developer specializing in WordPress & Webflow
Web designer & developer specializing in WordPress & Webflow
View more →
Framer Developer | Webflow & Figma to Web
Pet shopping, with a little more personality. 🐾
Introducing WIGGLE CLUB — my latest pet-commerce website concept.
Bold typography, cobalt blue, acid-yellow accents and editorial photography bring the brand to life across the shopping experience.
The design includes:
✦ Detailed desktop and mobile layouts
✦ Reusable Figma components and Auto Layout
✦ A connected design system
✦ Product discovery, wishlist and checkout prototype flows
Link: https://linky.design/wiggle-club
From the homepage to the smallest shopping detail, the goal was a playful brand experience with clear, practical navigation.
What catches your eye first—the typography, photography or layout?
#WebDesign #Figma #UIUXDesign #EcommerceDesign #DesignSystem
4
16
1.3K
Your product looks premium.
Does your website make the same first impression?
You refined the packaging. Chose the materials. Got the photography right.
Then the customer opens your website… and the buy button starts playing hide-and-seek. 🫣
This VELUNE concept explores that gap: a beautiful product deserves an equally thoughtful digital experience.
Immersive imagery.
Editorial layouts.
Clear product details.
A mobile experience that makes the next step easy to find.
I design and build websites with Framer, Webflow and Next.js, matching the platform to your project.
Planning a launch or a redesign? Send me your website and what you want it to do.
Your brand deserves a better address.
→ rohanahmed.net (https://rohanahmed.net)
VELUNE is a fictional brand concept.
#WebDesign #Framer #Webflow #Nextjs
12
729