Hottest Stories
The community is obsessed with these right now.
Beginner Friendly
Short, beginner-friendly journeys.
Reorder Showcase
Drag tiles between these two categories or use the arrow buttons to reorder. Each tile's addon bar provides a drag handle and move controls.
Your Queue
Stories you're reading next.
Watch Later
Saved for another time.
Portal Loader
The animated loading screen for CoNexus story worlds.
Technical Details
The portal is a 4-layer absolute stack: a circuit-board texture at 5%
opacity, a vignette overlay at 50% opacity, an SVG circuitry layer with
draw-on path animation, and a centered quill icon. All layers fill the
same aspect-ratio: 2048/1228 container with responsive max-width scaling up to 1024px.
LoadingPortal renders 4 staggered path groups (.draw-a through .draw-d) using stroke-dasharray/stroke-dashoffset animation on a 6s draw cycle with 1.5s stagger between groups. The entire
circuitry rotates 360° over 120s.
LoadingQuill cycles a 3s lifecycle: the stroke traces the quill outline, the body fill fades in with a scale pulse, and an accent dot levitates from the pen tip before being absorbed back. A gentle breath translation keeps the whole quill alive.
Two states control the animation: idle (frozen, dimmed) and loading (animated).
Toggle between idle and loading states. In idle,
all layers freeze and dim. In loading, circuitry paths draw on in staggered
waves while the quill cycles its trace–fill–absorb animation.
The loader fills its container width, scaling from 640px at tablet to 1024px at full-HD. Pass status="idle" to hold the portal in a dormant state, or status="loading" to activate all animations.
Narrative Effects
All effects below respect the global preference toggle in the Themes panel under Preferences.
Text doesn't just appear — it can react. Narrative effects add physical motion to text after it's revealed: a paragraph can shake from an impact, drift through a dreamlike scene, or flicker under failing lights. One-shot effects punctuate a single moment; continuous effects sustain an atmosphere for as long as the scene demands.
Technical Details
Narrative Effects are designed to run after Kinetic reveal. Kinetic controls how text arrives; narrative controls how the already-visible block physically reacts once it is on screen.
The six one-shot effects (shake, quake, jolt, glitch, surge, warp) auto-clean through the action's animationend guard. The twelve continuous effects (drift, flicker, breathe, tremble, pulse, whisper, fade, freeze, burn, static, distort, sway) loop until
the consumer clears them or disables the system.
Physics styling lives entirely in SCSS. Glass adds motion blur on
displacement-heavy effects, flat keeps the raw curves clean, and retro
applies per-effect stepped timing without flattening glitch or tremble into the same motion.
Every demo below respects the live global preference toggle. Turn Narrative Effects off and the text stays static while the same action lifecycle continues to run under the hood.
One-Shot Effects
Punctuation moments. Each demo replays a short impact or corruption
effect, then auto-clears through onComplete.
Shake
Door slam, collision, sudden impact
The blast door slammed shut and the whole corridor lurched sideways.
One-shot punctuation effect. Decays quickly back to rest.
Quake
Collapse, thunder, large-scale destruction
Stone dust rained from the ceiling as the chamber buckled under the shockwave.
Heavy two-axis jitter with a longer settle than shake.
Jolt
Jump scare, shock, sudden realization
A cold hand brushed the back of her neck and every muscle snapped awake.
Single violent displacement with an elastic return.
Glitch
Reality corruption, hacking, signal failure
For one breath, the memory fractured into static and rewrote itself.
Choppy skewed displacement tuned for digital instability.
Surge
Magic cast, transformation, power activation, epiphany
Light gathered in her palms and erupted skyward, burning through the dark like a second dawn.
Ascending power buildup with scale overshoot and brightness flash.
Warp
Teleportation, portal entry, dimensional shift, time warp
The doorway stretched sideways, pulled itself thin, and snapped her through before she could scream.
Horizontal scaleX oscillation with subtle skew for spatial distortion.
Continuous Effects
Sustained atmosphere loops. Start and stop each effect manually to compare readability, cadence, and physics adaptation.
Drift
Underwater, dreaming, weightless travel
The lantern floated beside them as the tide carried every word into blue silence.
Slow atmospheric lift. Best for calm sustained scenes.
Flicker
Failing lights, unstable power, haunted spaces
The emergency strip kept dimming, brightening, and dimming again in uneasy bursts.
Irregular opacity drops with hard cuts between states.
Breathe
Suspense, calm focus, emotional weight
She steadied herself and let the room inhale with her before the answer came.
Subtle scale pulse that stays readable over long scenes.
Tremble
Cold, fear, fragility, exposed nerves
His confession arrived in a shiver, barely held together by breath.
Fast micro-vibration. Continuous but intentionally restrained.
Pulse
Heartbeat, ritual energy, imminent countdown
The seal under the altar throbbed once, then again, brighter every time.
Sharper rhythmic beat than breathe, tuned for tension.
Whisper
Secrets, ghosts, fading memory, telepathy
A voice slipped past her ear so softly it felt borrowed from another room.
Opacity and scale recede together for a fragile presence.
Fade
Losing consciousness, drugged, time skip, falling asleep
The edges of the room softened and blurred away. Her thoughts dissolved one by one until only the dark remained.
Gradual opacity drift. Pure visibility change, no scale or position.
Freeze
Ice magic, paralysis, time freeze, petrification, stasis
The frost crept up her fingers and locked every joint in place. Even her breath hung motionless in the air.
Micro contraction and brightness reduction. Extremely subtle, reads as stillness.
Burn
Fire scenes, desert heat, rage, fever, volcanic environments
Heat rolled off the sand in visible waves, warping the horizon into a shimmering ribbon of light.
Vertical micro-wobble with skew oscillation. Faster rhythm than drift.
Static
Radio transmission, broken comms, digital interference, corrupted data
The signal dissolved into noise. Fragments of a voice fought through the interference, barely holding shape.
Rapid micro-jitter layered with opacity flicker. Tighter than tremble.
Distort
Drunk, poisoned, hallucinating, vertigo, psychic influence
The walls bent without moving. Every surface tilted just enough to be wrong, and her own hands looked like they belonged to someone standing in a different room.
Subtle rotation + asymmetric scale. Perception unreliable but still conscious.
Sway
Ship travel, storms, unstable footing, earthquake aftermath
The deck rolled beneath her feet and every step became a negotiation with gravity. The horizon tilted left, then right, then left again.
Lateral translateX sine wave. Distinct from drift (vertical) and burn (vertical+skew).
Kinetic Reveal + Narrative Effect
The real-world pattern: text is revealed with kinetic typography while narrative effects set the mood. Continuous effects (drift, flicker, etc.) run during the reveal as ambient atmosphere; one-shot effects (shake, jolt, etc.) fire once the text is fully visible. Switch the reveal mode and navigate between steps to compare.
Step 1 of 18
Revealing text…
Long-Form Test
Scrollable text containers for testing effects on longer passages. Pick an effect, then scroll through to see how it reads at scale.
The corridor stretched on for what felt like hours. Every few steps the overhead lights would buzz and settle, buzz and settle, casting long unsteady shadows across the concrete floor. There was no sound except the distant hum of ventilation and the quiet percussion of their own footsteps echoing off bare walls.
At the far end a heavy blast door stood half-open, a sliver of pale blue light spilling through the gap. Beyond it they could see a chamber — vast, empty, its ceiling lost in darkness. The floor was polished stone, cracked in places, with hairline fractures radiating out from a central point like the memory of an impact.
She pressed her palm flat against the door and pushed. The metal groaned, reluctant, then gave way with a low shudder that traveled up through her arm and into her teeth. The sound rolled through the chamber and came back changed — deeper, longer, as if the room itself had answered.
Something was different about the air in here. It tasted of ozone and old copper, the kind of atmosphere that settles into places where energy has been spent violently and never quite dissipated. The cracks in the floor glowed faintly, a dull amber that pulsed once and faded.
They stood at the threshold for a long time, neither speaking, both aware that whatever had happened in this room was not finished. The silence was not empty — it was patient. It was waiting for the next sentence to arrive.
The lake had no edges that she could see. It simply went on, silver and flat, until it became indistinguishable from the low-hanging sky. The boat rocked gently beneath her — not from wind, there was no wind, but from some deep slow rhythm in the water itself, as if the lake were breathing.
A lantern hung from the prow on a rusted hook, its flame barely moving. The light it cast was warm and small, touching only the nearest few inches of water before surrendering to the grey. She trailed her fingers over the side and watched the ripples spread outward in perfect circles that never came back.
Somewhere beneath the surface, very far down, something luminous drifted. It was too deep to have a shape — just a slow greenish glow that moved like a thought trying to surface. She watched it for a long time, and it watched her back, and neither of them blinked.
The silence here was not the silence of absence. It was thick, textured, full of tiny sounds folded into one another: the creak of old wood, the soft lap of water against the hull, a distant tone that might have been a bell or might have been her own pulse amplified by the stillness.
She closed her eyes and let the boat carry her. There was no current but the boat moved anyway, slow and sure, as if it knew where she needed to go even when she did not. The lantern flickered once, then steadied. The glow beneath the water followed like a companion.
Reference
One-Shot Effects
Fire once after text is fully revealed. Use for punctuation moments.
shake— Physical Impact- Rapid horizontal jitter, decaying to rest. Door slams, collisions, nearby explosions, heavy objects crashing.
quake— Massive Force- Violent two-axis displacement with a rolling settle. Building collapses, close detonations, structural failure, the ground splitting open.
jolt— Sudden Shock- Single sharp displacement with an elastic snap-back. Jump scares, sudden grabs, betrayals revealed, waking from nightmares.
glitch— Digital Corruption- Choppy skewed displacement with stepped timing. Simulation malfunctions, memory rewrites, hacking, signal failure, reality fractures.
surge— Power Activation- Ascending scale with brightness flash. Magic cast, transformation, divine intervention, power activation, epiphany.
warp— Spatial Distortion- Horizontal scaleX oscillation with subtle skew. Teleportation, portal entry, dimensional shift, time warp, gravity anomaly.
Continuous Effects
Loop from the moment the step starts, sustaining atmosphere throughout.
drift— Weightlessness- Slow vertical sine wave. Underwater scenes, dreaming, zero gravity, fog, meditative calm after intense action.
flicker— Unstable Environment- Irregular opacity drops with hard cuts. Failing lights, unstable power, haunted spaces, fading transmissions, phasing presence.
breathe— Held Tension- Slow rhythmic scale pulse. Suspense, centering before action, emotional weight (grief, awe), meditation, charged stillness.
tremble— Fragile Vulnerability- Fast micro-vibration, deliberately small. Freezing cold, bodily fear, physical fragility, suppressed emotion about to overflow.
pulse— Building Pressure- Heartbeat-tempo scale with sharp attack. Audible heartbeat, ritual energy charging, countdowns, approaching something powerful.
whisper— Fading Presence- Opacity and scale recede together. Ghosts speaking, fading memories, telepathy, secrets shared in near-silence, dying words.
fade— Consciousness Dissolve- Gradual opacity drift to half visibility. Losing consciousness, drugged, time skip, memory dissolving, falling asleep.
freeze— Cold Stillness- Micro scale contraction with brightness reduction. Ice magic, paralysis, time freeze, petrification, stasis.
burn— Heat Distortion- Vertical micro-wobble with skew at fast rhythm. Fire scenes, desert heat, rage, fever, volcanic environments.
static— Signal Noise- Rapid micro-jitter layered with opacity flicker. Radio transmission, broken comms, digital interference, corrupted data.
distort— Woozy Perception- Subtle rotation with asymmetric scale oscillation. Drunk, poisoned, hallucinating, vertigo, psychic influence, concussion.
sway— Lateral Oscillation- Horizontal sine wave. Ship travel, storms, unstable footing, earthquake aftermath, rope bridges, moving vehicles.
Most steps should have no effect. Effects are seasoning — contrast and
restraint make them land. Full AI reference with detailed scenario
triggers available in NARRATIVE-EFFECTS.md.