NOXBLY Interactive Tutorial #2
Turn AI Generated HTML into a Live Website in Just 1 Minute
HTML을 안전하게 배포하고, 쇼케이스·리믹스·협업으로 확장하는
NOXBLY 창작 생태계의 시작점입니다.
단순 HTML 배포를 넘어, 창작물을 공개하고 변형하고 요청하는 순환형 플랫폼으로 확장됩니다.
내가 직접 작성하거나 AI가 생성한 HTML을 업로드하고, 공개 URL과 단축 URL을 생성합니다.
완성된 창작물을 다른 사용자에게 공개하고, 조회수와 좋아요를 통해 좋은 작품이 자연스럽게 발견됩니다.
공개된 창작물을 기반으로 AI 리믹스 또는 HTML 직접 수정을 통해 새로운 변형 창작물을 만듭니다.
사용자가 원하는 창작물을 요청하고, 다른 사용자가 제작·제안·거래할 수 있는 협업 공간으로 이어집니다.
AI Mini Apps는 AI 또는 사용자가 만든 HTML 창작물을 실행 가능한 서비스 형태로 공개한 결과물입니다.
생산성 도구, 교육 콘텐츠, 실용 유틸리티와 미니게임을 설치 없이 실행하고,
마음에 드는 결과물은 리믹스해 나만의 실제 서비스로 발전시킬 수 있습니다.
AI 계산기, QR 생성기, 타이머, 변환기와 생활형 도구를 이용하세요.
실용 도구 탐색 →메모, 일정, 데이터 정리, 대시보드와 업무용 미니 앱을 실행하세요.
생산성 앱 탐색 →수학, 언어, 과학과 학습용 인터랙티브 콘텐츠를 만나보세요.
교육 앱 탐색 →퍼즐, 기억력, 아케이드와 캐주얼 게임을 설치 없이 플레이하세요.
미니게임 탐색 →실용 유틸리티, 생산성 도구, 교육 콘텐츠와 미니게임으로 실제 서비스되는 AI 결과물을 확인해 보세요.
Turn AI Generated HTML into a Live Website in Just 1 Minute
A seven-concept fireworks explorer! 🎆 Live Show — A full nighttime display over a city skyline with water reflections. Click anywhere in the sky to launch a firework. Shells leave glowing trails and burst into hundreds of particles. Auto-rate and gravity sliders let you adjust the show. 🚀 Launch Physics — Watch the projectile motion of a single shell. Real-time velocity and gravity vectors are drawn on the shell as it rises. A dashed trajectory prediction shows where it will go, and the burst point at peak altitude is marked. Includes the equations: y = v₀sinθ·t − ½gt². 💥 Burst Patterns — Six distinct shell types to explore: Peony (uniform sphere), Chrysanthemum (trailing stars), Ring/Kamuro (flat disc), Willow (long drooping tails), Spider (sharp radiating legs), and Palm (thick arcing arms). Click a type to switch; click the canvas to burst. 🎨 Color Chemistry — Click any element on the periodic table grid to see its flame color, the metal salt compound used, combustion temperature, and emitted wavelength. An animated electron orbital diagram explains why each element produces a unique color. ⚗️ Explosion Physics — Animates the three-phase lifecycle: shell rises on the lift charge → burst charge explodes with a visible shockwave → stars scatter and burn as they fall. A cross-section diagram shows the four internal layers of a shell. Includes the governing equations (PV=nRT, F=ma, E=hc/λ). ✨ Trail & Sparkle — Focuses on the individual burning "star" pellets. A timeline bar shows the ignition → peak brightness → fade → burnout progression. Sliders control burn time, star size, gravity, and air drag to show how each factor shapes the visual trail. ⏱️ Shell Timing — Shows how sequential electronic delay fuses create synchronized displays. A timing diagram plots each shell's launch and burst window. Click FIRE to launch the sequence and watch the shells go off one by one on their programmed schedule.
A six-concept solar system explorer! 🌌 Solar System — All eight planets orbit the Sun at accurate relative speeds. Hover over any planet to see its rotation period, orbital period, axial tilt, and number of moons. 🔄 Rotation vs Revolution — The left panel shows rotation (one day) and the right shows revolution (one year), running simultaneously. See intuitively how Earth completes 365.25 rotations during a single trip around the Sun. 🌍 Earth & Moon — Visualises tidal locking — the phenomenon by which the Moon always shows the same face to Earth. This happens because the Moon's rotation period equals its orbital period: both are exactly 27.3 days. Watch the white marker on the Moon — it never stops facing Earth. ⚡ Orbital Speed — Following Kepler's 3rd Law (T² ∝ r³), inner planets orbit dramatically faster than outer ones. Arrow length represents relative speed — the difference between Mercury (47.9 km/s) and Neptune (5.4 km/s) is striking. 🌡️ Axial Tilt & Seasons — Drag the tilt slider from 0° (no seasons at all) to 98° (extreme) and watch the Northern Hemisphere sunlight percentage update in real time. Experience first-hand that seasons are caused by axial tilt — not by distance from the Sun. 📊 Planet Compare — Select any two planets to compare their rotation period, orbital period, axial tilt, and moon count side by side. You can verify for yourself that Venus's day (243 days) is actually longer than its year (225 days).
🌌 Gravity Well — Hold the mouse button to spawn a second gravity source and watch particles shift their orbits. A real-time visualisation of Newton's Law of Universal Gravitation. 🔵 Double Pendulum — Two pendulums starting from nearly identical conditions trace completely different paths over time. An intuitive demonstration of the Butterfly Effect at the heart of chaos theory. 〰️ Wave Interference — Renders constructive and destructive interference patterns from two wave sources in real time. Drag either source to reposition it. 🪨 Sand Pile — Click and drag to pour sand and watch the Angle of Repose form naturally as grains settle into a self-organised slope. ✨ Lissajous Curve — Adjust the X/Y frequency ratio and phase to draw circles, figure-eights, pretzels, and more. The same principle behind oscilloscope waveform analysis. 🧲 Magnetic Field — Drag the N/S poles to new positions and watch the field lines instantly reform around them.
A nine-concept fluid mechanics explorer! 💧 Fluid Properties — Click any of the five fluids (air, water, engine oil, honey, blood) to see viscosity and density change in real time, with the particle motion inside the container responding accordingly. Pressure arrows show how hydrostatic pressure increases with depth. 📊 Pascal's Law — Press the PUSH button to transmit a small piston force to a much larger piston, lifting the car. The formula F₂ = F₁ × (A₂/A₁) is computed live. This is the principle behind car brakes, hydraulic lifts, and excavators. 🌀 Bernoulli's Principle — As the pipe narrows in the middle, airspeed rises and pressure drops — visualised through pressure gauges and particle colour. P + ½ρv² = constant. 🔄 Continuity Equation — A₁v₁ = A₂v₂. Drag the pipe cross-section slider and watch flow velocity automatically increase at the narrow section. Particle colour shifts from blue (slow) to red (fast). 〰️ Laminar vs Turbulent — Slide the Reynolds Number to switch between laminar flow (Re < 2300, smooth parallel blue streams), the transitional zone, and turbulent flow (Re > 4000, chaotic red mixing). In laminar mode, the parabolic velocity profile is drawn across the pipe. 🚗 Drag & Lift — Streamlines above and below the airfoil are drawn in real time (blue = high pressure, red = low pressure), and the lift and drag force vectors update as you adjust angle of attack and speed. Includes a drag coefficient comparison by shape (flat plate 1.17 → airfoil 0.012). 🔩 Pipe Flow — Calculates frictional head loss using the Darcy-Weisbach equation (h_L = f·L/D·v²/2g). Diameter, length, and velocity sliders instantly update Reynolds number, friction factor f, and total head loss. ⚙️ Pumps & Turbines — Four machine types: centrifugal pump (spinning impeller), axial turbine (hydropower), Pelton wheel (impulse turbine), and a pump-system curve graph (showing the operating point). RPM slider adjusts rotational speed. 🌍 Real World — Four detailed case studies with equations and animations: aircraft wing (2.7 MN of lift), ship hull (Archimedes buoyancy), blood circulation (non-Newtonian, pulsatile flow), and wind turbines (Betz limit: 59.3% maximum extractable power).
An eight-project Arduino simulator! Every project includes real Arduino code, a live circuit diagram, and a Serial Monitor at the bottom. 💡 LED Blink — The "Hello World" of hardware. A 220Ω resistor and LED circuit, digitalWrite(13, HIGH/LOW) code, and a PWM timing diagram all run simultaneously. 🔘 Button & LED — A live visualisation of INPUT_PULLUP. Click the button to light the LED, and see the inverted logic (LOW = pressed) explained in context. 🌓 PWM Fade — Controls LED brightness with analogWrite(9, 0–255). The PWM waveform and duty cycle update in real time as the LED breathes. 🌡️ Analog Sensor — Turn the potentiometer dial to read ADC values from 0 to 1023, then watch map() rescale them to the PWM range (0–255). Includes a voltage divider explanation. ⚙️ Servo Motor — Control the servo with an angle slider. The relationship between PWM pulse width (0.5ms – 2.5ms) and output angle is visualised live. 🎨 RGB LED — Mix any colour with the R, G, and B sliders. Press AUTO for an automatic rainbow cycle. A colour wheel is shown alongside. 📡 Ultrasonic Sensor — Shows how the HC-SR04 works with a TRIG/ECHO timing diagram. Verify the formula cm = round-trip time (µs) / 58 directly. 🚦 Traffic Light — Demonstrates a Finite State Machine (FSM). The RED → RED+YELLOW → GREEN → YELLOW cycle runs alongside a live state-transition diagram.
MULTI-VECTOR CHECK 🌐 GEO LOCATION | ipapi.co | Country, City, ISP, Timezone, Coordinates 🔤 REVERSE DNS | Cloudflare DoH PTR | Reverse DNS Hostname 📡 HTTP LATENCY | 6 fetch measurements | Min/Max/Median + Mini Bar Chart 🗂️ DNS RECORDS | Cloudflare DoH | A, AAAA, MX, NS, TXT, CNAME 📋 WHOIS / ASN | rdap.org | Network Name, Handle, CIDR / Domain Registration Info 🔌 PORT PROBE | fetch timeout detection | 80, 443, 8080, 8443, 21, 22 OPEN/CLOSED/FILTERED 🔒 DNS-over-HTTPS | Cloudflare, Google, Quad9 | DoH Response Time Comparison 🛡️ THREAT INTEL | Type Analysis | Hosting / Private / Residential ISP Classification
ARCADE SLOT INSERT COIN · SPIN · JACKPOT!
앱을 탐색하고 리믹스하거나, 직접 만든 HTML을 배포해 쇼케이스에 공개할 수 있습니다.
NOXBLY는 AI 생성 결과물을 단순히 공개하는 것이 아니라, 저장·검증·배포·접근 제어 흐름을 보안 기반으로 설계합니다.
창작 결과물을 보호 가능한 저장 구조로 관리합니다.
허용된 CDN, iframe, 외부 리소스 정책을 기반으로 위험을 줄입니다.
공개, 비공개, 리믹스 허용 여부를 창작자 중심으로 관리합니다.
HTTPS, CDN, 단축 URL을 통해 안정적으로 결과물을 전달합니다.