Neon Blockfall
A block-stacking game with its own neon identity, in closed testing on Google Play.
Rogério Gomes
Developer and Graphic Designer
I design visual identities and build apps, games and websites, from the first stroke to the last line of code.
Projects
01 · Android game
Neon Blockfall
- Type: Android game
- Year: 2026
- Status: Google Play closed testing
The block game I played nonstop as a kid became the starting point for one I created.
Real captures of the game, with the interface in Spanish.
- Background, #050914
- Cyan, #65efff
- Magenta, #ff2ea6
- Gold, #ffd45a
- Text, #eaf7ff
What you see
Neon system
Near-black navy background, with cyan, magenta and gold as accents. Corner frames, monospaced uppercase labels and numbers in Space Grotesk.
Phases and scenarios
Four visual scenarios and a new phase every 8 lines. Modifiers (overload, pulse, blackout) alternate with calm phases.
Touch controls
Swipe to move, tap to rotate, swipe down to lock and swipe up to hold a piece. Six large buttons sit at the bottom of the screen.
How it is built, behind the screen
Pure TypeScript core
The game rules live in a module with no React, DOM or audio, so it can be tested in isolation with Vitest.
Serializable state
Game state is serializable: a match can be resumed when the app reopens, and the Daily Challenge uses a date-based deterministic sequence.
Delivery to Android
A web game packaged with Capacitor. The android/ folder is disposable: CI recreates it on every build and reapplies, by script, the changes the store requires.
Its own take on the genre
Its own pieces, modes, scenarios and phase modifiers, without claiming to have invented the genre.
Attempted, not completed
Online ranking, no accounts of my own
I wanted an online ranking without building an account system. I tried Google Play Games and got stuck in the implementation. Today the game only has a local scoreboard.
AquaControl
An internal app for field work, supervision and administration at a pool maintenance company.
02 · Operational software
AquaControl
- Type: Internal app
- Year: 2026
- Status: In operational use since Jun 10, 2026
I did pool maintenance for Aguas y Oleocontrol, in Spain, and saw the work of many technicians pile up in WhatsApp groups. I designed and built an app of my own to replace them.
One visit, nine steps
The technician follows the same path on every visit, and the draft stays saved on the device until the end.
Step 1Picks the pool on the route. Pools already visited stay locked until 6 a.m.
Three roles, one product
Technician
The day’s route, pools, visits and incidents.
Supervision
Alerts, critical incidents, resource management and reports.
Administration
All of that, plus users, absences and maintenance mode.
In use since June 10, 2026, 7 days a week, about 12 operating hours a day, with 27 technicians. Figures I reported myself, not measured by analytics.
From the route to coordination
Pool assignment, absences, stock and PDF reports by technician, pools and period. The company used the reports for monthly operational control, the end-of-season report and to present information to clients.
Decisions
No signal, the visit goes on
Technicians worked with weak or no signal. The visit stays on the device and, once finished, goes into a queue that retries up to 3 times without duplicating it, with no screen of its own. If the retries run out, the item is marked as failed.
Permissions in the database, not just on screen
Who can see and change what is enforced in the database, by role, and access stays blocked until the mandatory password change.
One app instead of the groups
Each technician signs in with their own account and the offline cache is separate per user. Routes, days off, pools, materials, visits, reports, photos and videos now live in one place.
No credit card in the way
I wasn’t paid for infrastructure costs and wanted to avoid a service that could bill me once past the free plan. That is why I moved from Firebase to Supabase.
How it is built
- On the device
- React Native with Expo and TypeScript, for Android.
- On the server
- Supabase: accounts, Postgres with role-based rules, media storage and server functions.
- Delivery
- Android builds through EAS, distributed as an APK, with OTA updates. Not on Google Play.
Context: the Supabase free-plan storage was exceeded by the accumulation of photos and videos, and the service is restricted for now. The summer operation is planned to run until September 30, 2026.
This is a study of my work and of the product; it does not represent the company.
Feito Pela Bya
Name, logo and creative direction for a real handmade truffle business, with its own website.
03 · Brand identity
Feito Pela Bya
- Type: Brand identity and website
- Year: 2026
- Status: Brand and site in use
I created the name, the logo concept and the creative direction for Feito Pela Bya, my daughter Marya Bheatrys’s handmade truffle business, and built the website.
The B is a ribbon
The chocolate ribbon curls into the B of Bya. The bow closes the box, the truffles show what is inside and the script lettering signs it.
Visual language
Deep plum, raspberry and cream, with fine gold details. Playfair Display for headings, DM Sans for text.
Plum#1e0918Playfair Display
Soft plum#4f3345
Raspberry#c26c96
Cream#ffede4
Light rosé#f6d6c9
Four flavors, one brand
The apron, the ribbon-B, the flavor plaque and the brand card repeat across every scene.
Same worktop, same ribbon, same apron.
Product visuals created with AI assistance, under creative direction. They are not photographs.
The brand in use
In the product visuals, the logo appears on the apron and on the card, and the ribbon becomes the B.
Flavor plaques
On the website
The site uses the same palette and the same serif, and takes the order all the way to WhatsApp.
Feito Pela Bya is the brand and business of Marya Bheatrys, who also contributed ideas during development.
Adriano Reformas Vigo
A landing page for Adriano’s renovation business in Vigo, Spain.
04 · Website for a local business
Adriano Reformas Vigo
A real website for a renovation business in Vigo: built to take visitors to a quote request by WhatsApp or phone, with the work in plain sight.
- Type
- Local business website
- Year
- 2026
- Status
- Live, real client site
The client and the goal
Adriano is a tiling and renovation professional in Vigo, Spain. The site is the business’s digital presence and the entry point for quote requests.
- Client
- A local renovation business: tiling, masonry, painting and full renovations, around Vigo.
- Goal
- Turn every visit into a conversation: WhatsApp and phone are one tap away throughout, with no sign-up and no middlemen.
- Language
- Spanish, the local audience’s. The text of this case is translated; the captured interface is not.
The site experience
A single page organised like a quote conversation: what he does, how he works, what he has done and how to reach him.
Opening, services, how it works, projects, about the professional, commitment, service area, reviews and contact.
The work in plain sight
The gallery shows 24 real photos of jobs, organised by type, in a column grid. Each photo opens enlarged, with a caption.
Six filters: all, kitchens, bathrooms, renovations, exterior and “before starting”.
Only interior photos appear here. The few facade and street photos on the site were not used in this case, to protect clients’ privacy.
Conversion: WhatsApp and phone
The path to contact is the same across the page: a WhatsApp button, almost always with the message already written, and a link to call.
- Throughout
- The Presupuesto gratis button sits in the header; the opening has WhatsApp and Llámame ahora; each service, the steps, the introduction and the service area lead to WhatsApp.
- Ready-made message
- Each link opens the chat with its own text, depending on context: general quote, kitchen or bathroom, tiling, painting, service area.
- On desktop
- A floating WhatsApp button follows the scroll.
- On mobile
- Below 640 px the floating button goes away and a fixed bar appears at the bottom with two buttons: Presupuesto gratis, which leads to the form, and WhatsApp.
What the form builds
- Hola Adriano, soy {nombre}.
- Me interesa: {tipo de trabajo}.
- Detalles: {descripción}.
- Mi teléfono: {teléfono}.
The form sends nothing to a server: on submit, the browser opens WhatsApp with the message ready and the visitor decides whether to send it. No data is stored.
Local SEO and search presence
What the site declares so search engines and social networks read it as a local renovation business in Vigo.
- Structured data
- JSON-LD of type GeneralContractor, with name, contact, price range and the nine municipalities served.
- Metadata
- Title, description, canonical URL, Open Graph and Twitter card for the WhatsApp and social preview, and the page language (es) declared.
- Crawling
- sitemap.xml with the home page and the two legal pages; robots.txt allowing everything and pointing to the sitemap.
- Service area
- An interactive map with nine municipalities and a 25 km radius around Vigo, which is also in the structured data.
- Alternative text
- Each gallery photo has a written description, which also works as its caption.
- Legal pages
- Legal notice and privacy policy, linked in the footer.
This case describes the structure. There are no ranking, traffic or conversion measurements, so no result is claimed.
Implementation
- One source, two builds
- The site is a single template of plain HTML, CSS and JavaScript, with no npm or framework. Two Python scripts, standard library only, swap the image placeholders: one produces a self-contained file with the photos embedded as base64; the other produces index.html with the photos as separate files, the one used live.
- Brand in variables
- The client’s brand-guide palette, work blue, orange and cream, lives in CSS variables at the top: change it there and the whole site changes.
- Interactions
- Each behaviour is an isolated function: buttons with a radial reveal from the pointer’s entry point, scroll reveal, gallery filters and lightbox, side menu and map.
- Map on demand
- Leaflet 1.9.4, from cdnjs, and its CSS are only downloaded when the map gets within 400 px of the screen.
HTML, CSS and JavaScript; Python for the builds; Leaflet with OpenStreetMap; Poppins, Inter and Caveat fonts via Google Fonts; hosted on Vercel and served on the client’s own domains, adrianoreformas.com and adrianoreformas.es.
On mobile
The same site reorganises below 640 px: a side menu, a two-column gallery and the fixed contact bar.
Real captures of the published site, with an emulated phone screen. The fixed bar is in a separate capture, taken in a 390 px window.
Images and performance
Job photos taken on a phone are heavy; here they arrive light and only when needed.
- 24
- photos in the gallery
- 1100 px
- on the long edge
- 13 to 200 KB
- each photo, 1.4 MB in total
The site’s photos are resized and light (the repository does not include the step that reduced them). Live, the gallery’s 24 use lazy loading (loading="lazy"), the map waits until it is near the screen and the deploy version references the photos as files instead of embedding them in the HTML.
What this case does not claim
There are no business figures, customer reviews or search or conversion results in this case: the site does not measure them and nothing here invents them. The case also shows no client contact details.
Luciane Correa Servicios
A cleaning and home-care service website in Linares, Spain, with moderated testimonials and its own Cloudflare backend.
05 · Website for a local business
Luciane Correa Servicios
A real website for a cleaning and home-care service in Linares, Spain: services, packages and testimonials, with its own Cloudflare backend for moderation and visits.
- Type
- Website for a local business
- Year
- 2026
- Status
- Live, real client website
Context and objective
Luciane offers home cleaning and care services in Linares. The site is the business's digital presence: it presents the services clearly and gives visitors a direct path to contact through WhatsApp.
Visual direction
The identity documented in the project itself (ideas.md, written before implementation): editorial, restrained, with deep navy as the signature color.
- Palette
- Deep navy, ivory and a soft gold as an accent — the same colors used in this case.
- Typography
- A serif face for headings, paired with a functional sans-serif for body text and buttons.
- Composition
- Numbered labels per section, a thin gold rule as an editorial marker, and generous whitespace.
Services and packages
The offer splits into two levels: five individual services (home and common-area cleaning, ironing, pet and child care) and three recurring packages (weekly, biweekly, or a deep clean).
Conversion: everything leads to WhatsApp
There is no single contact button: every section has its own, with a pre-written message specific to that context.
- Contextual messages
- Every service, every package and the quote form open WhatsApp with their own pre-filled text.
- Floating button
- A WhatsApp button follows the whole page's scroll, repositioning itself so it never covers the footer.
- Quote form
- Name, phone, service and message: on submit, the browser opens WhatsApp with everything organized. Nothing is sent to a server.
How it works
A short, transparent section on what to expect at each visit, with an honest invitation: share your own home's before-and-after over WhatsApp, not generic stock photos.
Testimonials and moderation
The site has a real public testimonial system, with a moderation panel behind it.
At the time of this capture, production had no public testimonials yet — the form exists and works, but no review had been submitted and approved yet. Every submission arrives pending; it's only published once Luciane approves it from the admin panel.
Engineering and Cloudflare
- Frontend
- React 19, TypeScript and Vite, with Tailwind CSS 4 for the visual system.
- Testimonials
- A Cloudflare Function stores every submission in Cloudflare KV as pending; a dedicated panel, protected by a password (Bearer token), approves, hides or deletes them.
- Anti-spam
- An invisible honeypot field in the public form: only bots fill it in, and the submission is discarded when they do.
- Country-level visits
- Another Function counts visits using the country Cloudflare's own edge reports, storing no IP or personal data at all — just a total per country.
React 19 · TypeScript · Vite 7 · Tailwind CSS 4 · Cloudflare Pages · Cloudflare Pages Functions · Cloudflare KV.
On mobile
The same page reorganizes into a single column, with the main menu turning into a sliding panel.
Real screenshots of the published production, at 390px wide.
What this case does not claim
The site is live and the implementation is real, but this case does not claim business impact: there are no documented metrics for leads, sales, conversion uplift or search growth. The testimonials section describes the system as it is, without inventing reviews that do not yet exist.
Matteo
A birthday invitation that evolved into a multi-page digital experience: a scene that changes with the visitor's local time, a countdown, attendance confirmation and gift suggestions.
06 · Interactive digital experience
Matteo
A birthday invitation that evolved into an interactive, multi-page digital experience, combining visual storytelling, a dynamic atmosphere, interaction and a responsive experience.
- Type
- Interactive digital experience
- Year
- 2026
- Status
- Live, authorial project
From a shareable invitation to an experience
The starting point was a birthday invitation meant to be shared by message. The idea evolved into a complete digital experience: a link that opens into a small interactive journey, not a single image.
A scene that changes with the day
The page's atmosphere changes according to the visitor's local time: day, dusk and night each have their own palette, light and illustrations — it isn't a fixed decorative effect, it's computed on every visit.
More than an atmosphere
The page has layers of narrative: a real countdown, an opening quote and an invitation to tap into small details of the story.
A consistent visual universe
The same illustrations follow the atmosphere change, in versions of their own for day and night, reinforcing the experience's visual identity.
The visual universe is inspired by 'The Little Prince', by Antoine de Saint-Exupéry: its characters and motifs appear as a thematic reference, without implying affiliation, licensing or ownership by x7rG.
The invitation continues beyond the main page
Three dedicated routes extend the experience: attendance confirmation, directions and gift suggestions — real functionality, not decorative screenshots.
Engineering
- Frontend
- React 19, TypeScript and Vite, with Tailwind CSS 4 and custom CSS for the atmosphere system.
- Atmosphere
- The day/dusk/night state is computed from the visitor's browser local time, re-evaluated every few minutes.
- Distance gift
- Generation of the Pix payment code (the Brazilian Central Bank's BR Code/EMV standard), including the CRC16 checksum, entirely in the browser.
- Accessibility
- The system's reduced-motion preference disables the parallax interaction and the more elaborate transitions.
React 19 · TypeScript · Vite 7 · Tailwind CSS 4 · Google Forms · Google Maps · YouTube (embedded music).
On mobile
The main navigation becomes a sliding panel and the four routes stay fixed in a bottom bar — a deliberate reorganization, not a scaled-down desktop.
The same function, reorganized for touch — not just scaled down.
What this case does not show
For privacy, this case does not reproduce the live attendance-confirmation form, the event's exact map, or any data from the Pix distance-gift system (key, recipient name or QR code). These features are described, not shown in their real state.
Login The Moon
A login screen turned into a small space story: a lunar scene, an animated landing and a card that reacts to the pointer.
07 · Login experience
Login The Moon
A login screen that stages an arrival: a lunar module descends, dust rises and the sign-in button becomes part of the scene.
- Type: Cinematic login experiment
- Year: 2026
- Status: Published as a demo
Capture of the published project. The app’s interface is in English.
The login becomes a sequence
Two gestures, two responses. The first touch anywhere on the page starts the lander’s descent; submitting the form takes 3.6 s and ends in “Access granted”.
6.4 s descent
First touch
Any click or tap on the page unlocks audio and starts the landing: the lander begins to descend 0.6 s later and takes 6.4 s. It happens once per visit.
3.6 s
Submit
With email and password filled in, the button enters loading for 3.6 s, the activation sequence plays and a bicycle crosses the button.
final state
Arrival
The button turns green, the text changes to “Welcome aboard.” and the lander finishes landing in its own time. There is no redirect: the arrival is the end.
The descent
It is not a video: the lander is an image placed over the scene and moved by CSS, with thrusters, dust and shadow on the same clock.
+1.2 s
+2.1 s
+3.0 s
+4.6 s
Four frames of the same recording, cropped around the lander. Times count from the first touch.
Fourteen layers
The lander, two thrusters, the engine glow, two dust layers, five smoke layers, two dust waves and the shadow run on a single 6.4 s clock and switch on with one class, is-activated.
The button is part of the scene
The sign-in button does more than confirm. During the 3.6 s wait a bicycle crosses it towards a lunar glow, and the result arrives as the button’s own state.
Idle
Sending
Access
The bicycle silhouette is an AI-generated image, shown on the button at natural size. The previous silhouette, taken from the internet, was removed from the project.
Motion and sound on the same clock
The audio is not a file: it is synthesised in the browser with the Web Audio API, in two sequences, one for each gesture. The bars show, in seconds, what the code schedules.
First touch
Image
- Descent 0.6–7 s
Sound
- Low engine 0.62–6.82 s
- Pressure noise 0.62–6.72 s
- Touch 5.96–6.54 s
- Settling 6.2–6.73 s
Submit
Image
- Loading 0–3.6 s
Sound
- Access granted
- Activation 0.02–0.62 s
- Movement 0.12–2.67 s
- Lunar swell 1.17–2.97 s
- Chord 3.04–3.93 s
Listen to the two sequences
Samples rendered with the app’s own audio code, with the volume normalised. Nothing plays on its own.
Under the hood
- State
- A React state with three values, idle, loading and success, drives the button, the card and the message. Submitting only leaves idle with email and password filled in; a 3.6 s timer moves to success and is cancelled when leaving the page.
- Landing
- A second switch, separate from the login: sceneActivated. A click or tap anywhere turns it on once per visit and CSS takes over the lander’s layers.
- Pointer
- The card reads the mouse position and writes two CSS variables, --shine-x and --shine-y, which move the surface glow. Touch does not move the glow.
- Sound
- The AudioContext is only created after a visitor gesture. Oscillators, filtered noise and gain envelopes form the two sequences, with no audio file at all.
- Adaptation
- The scene is aria-hidden and the status uses aria-live="polite". With prefers-reduced-motion the animations drop to almost zero and the lander appears still, with no thrusters or dust. A WebView signal keeps animations on inside apps. There are adjustments for screens up to 560 px, portrait and heights up to 740 px.
Next.js 16 and React 19, TypeScript 5, exported as a static site; custom CSS (Tailwind is imported but does not draw the interface) and Web Audio. Published on GitHub Pages and Cloudflare Workers.
On mobile
The card fills the screen width and the scene recedes into the background. Both captures are the real 390 × 844 state, the project’s own layout.
Real captures of the published project.
What this is not
It is an interface experiment, not an authentication system. Any email with a filled password triggers the demonstration: there are no accounts, server, session or validation. Google, Apple, password recovery and account creation are visual elements that only show a message (“ready to connect”); no integration exists.
Light Login
A login screen where light controls the interface: an interactive lamp, the swing of its cord and audio generated in the browser.
08 · Login experience
Light Login
When the lamp turns on, the form appears. When it turns off, the form leaves the screen and the keyboard: the light is the state of the interface.
- Type: Light-controlled login experiment
- Year: 2026
- Status: Published as a demo
One cord, two responses
The same cord answers in two ways, and 4 pixels of movement decide which.
- Drag
- The cord reacts to the pointer's displacement: it turns up to 38° and stretches from 68% to 84%. On release it returns with an elastic rebound. The light stays as it was.
- Tap, click, Enter or Space
- A short pull: 190 ms later the light toggles, the scene takes 0.7 s to change and the form comes in or out.
Pointer or touch
Only the horizontal and vertical displacement from the pivot matter, the point the cord hangs from.
Geometry
angle = asin(displacement ÷ resting length), with the angle capped at 38°. Vertical displacement adds up to 16% to the length.
Angle and length
They become two CSS variables, --chain-angle and --chain-length, that turn and stretch the same element without recreating it.
Release
With more than 4 px of movement it was a drag: the cord returns and the light stays. With 4 px or less it was a click: the light toggles.
Turning the light off takes the interface out of the keyboard
With the light off, the form does not just get dark: it leaves the Tab order, leaves the accessibility tree and stops receiving touches. Turning the light on brings it all back.
Light on
- Apagar o abajur
- @_7Ragnar
- Senha
- Entrar
Light off
- Acender o abajur
- the form leaves the order
Tab stops in the project, with the names the app itself uses, in Portuguese.
aria-pressed- The cord button says whether the light is on, and its name switches between “Apagar o abajur” and “Acender o abajur”.
aria-hidden- The form also becomes invisible and unclickable: it leaves the accessibility tree and the pointer's reach.
tabIndex = -1- The fields and the Entrar button leave the Tab order: the keyboard only reaches the cord.
role="status"- The “Acesso realizado.” message is announced without moving the focus away from where it is.
Under the hood
- Sound
- Four responses synthesized in the browser with the Web Audio API, with no sound files: the cord rattles as it swings, the switch clicks (with a brief surge when turning on), signing in plays three notes and an error plays a falling tone. Audio only starts after the first touch.
- Motion
- The scene, the cord and the form are CSS transitions. With prefers-reduced-motion they drop to almost zero and the state stays the same.
- Made with
- Next.js 16, React 19 and TypeScript 5, exported as a static site; custom CSS and the Manrope font. Published on GitHub Pages and Cloudflare Workers.
What this is not
It is an interface experiment. No credentials are sent or stored and there is no authentication: the form only uses the browser's validation (a valid email, a password of at least 6 characters) and shows “Acesso realizado.” for any valid pair.
Checkout
An educational checkout prototype, responsive and interactive, to study React, TypeScript, CSS 3D and animation. It does not process payments.
09 · Interface prototype
Checkout
- Type: Interactive checkout prototype
- Year: 2026
- Status: Published as a demo
A checkout where the card is the interface: it reads the form as you type, flips to show the CVV and follows the order through to the receipt. A study prototype, not a payment system.
Real captures of the published prototype, with the interface in Portuguese. The card and the data are demo data.
The card is the form
Every field has a place on the card, and the card shows only what the form holds: nothing on it is decorative.
- Number
- Shown formatted on the front. The first digit picks the colour, the brand and the format.
- Name
- Becomes the holder, up to 28 characters.
- Expiry
- Becomes the expiry, in MM / YY format.
- CVV
- The card turns and shows the back, with the code masked.
The brand follows a simplified teaching rule based on the first digit, from 1 to 8. It is not real card-brand detection or issuer validation.
The order reads the same state
Quantity (1 to 5), coupon and total come from the same React state. The test coupon X7RG007 gives a 10% demo discount, and the recalculated total returns on the Pay button and on the receipt.
- 2 × € 189,00
- € 378,00
- Coupon X7RG007 · 10%
- − € 37,80
- Total
- € 340,20
From click to receipt
Paying takes the overlay through three states. The receipt is the end of the flow, not the subject of the project.
idleThe ordinary page, with the form and the summary.
processingFor 2.7 s, the card floats over a blurred background.
approvedThe terminal shows the amount and prints a receipt with no fiscal value.
Under the hood
focused- Which field has focus. It sets the card face: focusing the CVV flips the card.
number- Brand, colour, number format and CVV length.
quantity, discount- Subtotal, discount and total, repeated on the button and on the receipt.
paymentState- idle, processing and approved: the overlay and the 2.7 s timer.
The flip is CSS only: a scene with 1100 px of perspective, two faces in preserve-3d and a 0.72 s transition to rotateY(180deg), switched on by a class.
React 19.2.6 and TypeScript 5.9, Vite 8 and CSS (3D and keyframes). Published as static files on GitHub Pages and Cloudflare Workers.
What this is not
It is a study prototype. It does not process payments, does not send or store card data and does not validate cards: it only checks that fields are filled and their length. PayPal and Apple Pay are visual tabs, with no integration. The brands are illustrative and do not imply any affiliation. Atmosphere text in the interface, such as “Checkout protegido”, does not mean payment security. The receipt has no fiscal value.
Recibo Digital
A thermal printer that prints a demo receipt, in the browser and with no data back end.
10 · Interactive experience
Recibo Digital
- Type: Interactive front-end experience
- Year: 2026
- Status: Published as a demo
An approved payment usually ends as a line of text. This project asks whether a digital confirmation can keep some of the ritual of receiving a printed receipt: the machine starts, the paper comes out, a signal says it is done.
One receipt, four states
The visitor never changes screens: the printer moves through four states, and everything you see or hear depends on which one is active.
Waiting
idlestarting point
- Paper
- Retracted
- LED
- On
- Neon
- Resting
- Sound
- Silence
- Actions
Printing
printingclick on Print
- Paper
- Out in 1.9 s
- LED
- Blinking
- Neon
- Intense
- Sound
- Printer
- Actions
- Locked
Ready
ready1.9 s later- Paper
- Fully out
- LED
- Bright green
- Neon
- Resting
- Sound
- Chime
- Actions
- Cut or reprint
Torn off
tornclick on Cut
- Paper
- Falls away
- LED
- Dimmed
- Neon
- Resting
- Sound
- Silence
- Actions
- Reprint
From “ready” and from “torn off” you can print again, and the cycle restarts.
None of these outputs animates on its own: they all read the same state, so nothing drifts out of sync.
The printing moment
This is the interaction that makes sense of the rest, and a still image cannot show it. The recording is of the real experience, with no sound.
- 0 s
Imprimir recibo: the click starts the printer sound and the state becomes printing.
- 0 to 1.9 s
The paper descends through the slot while the LED blinks and the neon intensifies.
- 1.9 s
The state becomes ready and the chime sounds at the same instant. The buttons become Cut and Print again.
- Then
Cut leads to the torn state: the paper falls away and disappears.
The sound
The printer is a recording made by Rogério, 1.9 s long, the same length as the paper animation. The chime is synthesized in the browser with Web Audio, as two tones (880 Hz and 1318.5 Hz).
Sound only plays when you press a button.
Under the hood
One state, several outputs
A single state value in React becomes a class on the machine. The CSS reads that class for the paper, the LEDs, the neon, the buttons and the helper text. Nothing animates on its own, so nothing drifts out of sync.
The sound is ready at the click
The printer recording is loaded as soon as the page opens. The audio context is created on the click, because browsers only allow sound after a gesture from the visitor. The chime comes from the same transition that leads to the ready state.
The paper only exists inside the slot
The receipt is clipped by the machine's window and moves only with translate3d, a GPU-accelerated transform chosen to keep the motion stable in WebKit browsers such as the iPhone's.
Made with
- Interface
- React 19 and TypeScript.
- Motion
- CSS: keyframes, transitions and translate3d.
- Sound
- Web Audio API and a WAV recording.
- Runtime
- vinext (the Next.js API on top of Vite 8) on a Cloudflare Worker, which handles SSR and image optimization.
- Quality
- ESLint with jsx-a11y and a test on the rendered HTML.
There is no database and no data back end. The only server code is the Worker that delivers the page.
What this is not
It is an interface demo. The receipt's amounts, date and card are fictional: nothing is charged, emailed or stored, and the receipt has no fiscal value. The starting idea, using less paper when a digital receipt is enough, is only motivation: the project measures no savings at all.
DiscordCameraLive
GoLiveBypass adaptation to restore Go Live and camera access in Discord.
11 · Desktop utility
DiscordCameraLive
DiscordCameraLive is a fork of GoLiveBypass. This case separates what came from the original project from what x7rG modified and maintains.
- Type
- Desktop application (fork)
- Year
- 2026
- Status
- Maintained fork, based on v1.1.5
The base: GoLiveBypass
GoLiveBypass was created by bezumiya. DiscordCameraLive starts from its version 1.1.5 and keeps the GPL-3.0-or-later license.
- What it does
- An Equicord/Vencord plugin starts a local SOCKS router and sends only Discord’s gateway WebSocket through a proxy outside Brazil: the user’s own, a local Tor or a validated free proxy. The rest of the traffic goes direct.
- Why it exists
- According to the README, it was written after Brazil’s data protection authority (ANPD) ordered Discord to suspend Go Live in the country. The program works around that regional restriction for Go Live and the camera.
- How it installs
- A one-click Electron interface, script installers and a standalone mode, and a Go API that receives bug reports. All of this comes from the original project.
- Who made it
- Besides bezumiya, the fork’s README credits mazxxy (the proxy design idea), Vithor (the first installer), cleo-dev (the graphical interface) and other contributors.
What x7rG changed
Established by diffing against the original’s version 1.1.5. The plugin and the Go API stay as in the original; the work is in the desktop application, delivery and documentation.
Equicord/Vencord plugin
Inherited
The logic is the original’s. In the fork, the plugin name and the about text changed.
Go API (bug reports)
Inherited
Inherited. Only names and the target repository were changed.
Electron interface
Inherited + x7rG
The interface comes from the original. x7rG hardened it: nodeIntegration off, context isolation and sandbox on, preload through contextBridge and a Content-Security-Policy in the HTML.
The app.asar swap
x7rG
The swap stopped deleting before writing: the new content is prepared in a temporary folder, the current app.asar moves to a rollback name and only then does the new one go in, with a way back if anything fails.
IPC inputs
x7rG
The proxy address coming from the interface is validated (type and a 512-character limit) and the window-height request has a 1200 cap.
Name, brand and installers
Inherited + x7rG
Installers and standalone are inherited. The project was renamed in code, texts and scripts, and the icon and logo became an x7rG emblem, with the x7rG Enterprise banner.
Continuous integration
x7rG
CI on every push and pull request: builds the interface, checks that the embedded copy of the bypass has not diverged, runs vet and the API tests and the shell tests; plus a weekly Dependabot.
Documentation and delivery
x7rG
README split into five guides, SECURITY.md and a step-by-step for beginners; release v1.1.5 with a Windows executable, a Linux AppImage and a macOS dmg/zip.
Under the hood: the app.asar swap
The program enables the bypass by swapping the app.asar of the Discord installation (the original becomes _app.asar). The change was in the order of operations.
Before (original)
- Deletes the current app.asar
- Writes the new content in its place
- A failure midway leaves Discord without an app.asar
After (x7rG)
- Writes the new content to a temporary folder
- Moves the current app.asar to a rollback name
- Moves the new folder to app.asar and only then deletes the rollback
- If the last step fails, the previous app.asar comes back
- nodeIntegration: true,- contextIsolation: false,+ nodeIntegration: false,+ contextIsolation: true,+ sandbox: true,Real lines from the electron/main.ts diff against the original’s v1.1.5. The diagram is the portfolio’s.
Risks and limits
- Terms of Service
- Using modified clients and proxies to work around the regional restriction may violate Discord’s Terms of Service. The project’s README and SECURITY.md say so and ask for use at your own risk; the risk of account punishment is described as low, but present.
- No link to Discord
- It is not an official feature and has no affiliation with, support from or endorsement by Discord. There is no guarantee that Go Live will work in every session or that the account is safe.
- It touches the Discord install
- The application renames the original app.asar to _app.asar and writes a new app.asar; disabling restores the original. The application is unsigned, and the system warns on first launch.
- Version
- The fork is based on v1.1.5 and published release v1.1.5 on 22 August 2026. The original moved on (v2.0.9, from 20 September 2026) and this fork does not include those changes.
- Privacy
- According to SECURITY.md, no data goes to the project’s servers. Gateway traffic goes through the chosen proxy, and free proxies are weak for anonymity.
Credit
- Original project
- DiscordCameraLive is based on GoLiveBypass, created by bezumiya (GPL-3.0-or-later). The plugin, the Go API, the installers and the original interface belong to the original project and its contributors.
- x7rG
- Rogério Gomes / x7rG adapted and maintains this fork: renamed the project, hardened the Electron interface, made the app.asar swap transactional, validated IPC inputs, added CI, reorganised the documentation and published the release, according to the repository’s history and diff. He is not the creator of GoLiveBypass.
- AI and assets
- The modifications were developed with AI assistance: the repository history records a thank-you to Claude for the code, and the extent is not documented. The x7rG emblem file used as the icon was generated with AI.
About
I start from what already exists: a WhatsApp group, a PDF, a childhood memory. Then I design and build what’s missing.
Rogério GomesCreator of x7rG ENTERPRISE
I'm Rogério Gomes, creator of x7rG ENTERPRISE. I work across technology, design and product, turning problems, needs and ideas into digital experiences.
Not every project starts from a formal specification. Some start with a real operational need, an inefficient process, an interface that could work better, or an idea worth exploring. My role is to give that idea direction and turn it into something that can be seen, used and tested.
From idea to execution
I take part in the whole process, not just one stage of it:
- Idea
- Direction
- Experience
- Interface
- Development
- Testing
- Refinement
Code and design aren't isolated stages. They're part of the same construction process.
Artificial intelligence is also part of that process. I use AI as a tool to develop, explore alternatives, produce certain assets and speed up iteration — while keeping direction of the project and being clear about its part in the result.
The background is cross-disciplinary: visual design, systems development, technology management and technical systems.
- Graphic DesignUniversidade Salgado de Oliveira — UNIVERSO
- Systems Analysis and DevelopmentFaculdade de Americana — FAM
- Postgraduate studies in Artificial Intelligence, Business Intelligence, Forensic Expertise and IT GovernanceFACUMINAS
- Technical education in Electrotechnics and Mechatronics
Artificialintelligencehasbecomeoneoftoday'sleadingtechnologicaltoolsandatransformativeforceintheeconomyandsociety.Itsevolutionalreadyshapesproductivity,thejobmarket,howcompaniesandprofessionalscreatesolutions,anddifferentaspectsofpeople'slives.
In the end, every project in this portfolio is that: an idea that found direction, shape and real use.
The identity
From rG to x7rG.
I've always liked being called by my full name: Rogério Gomes. To me, a name has always carried identity.
Many of the people I've admired throughout my life were also known by their own name and by what they built with it. Among them, Steven Paul Jobs has always been a reference for his journey of overcoming hardship, entrepreneurship and resilience.
My first identity was born from exactly that.
rGRogério Gomes
A symbol built from my own initials. It was the start of an identity that would keep evolving alongside my ideas and projects.
Over time, rG became x7rG.
- xMultiplicationIdeas, possibilities, and whatever can grow from a first idea.
- 7Lucky numberIt's personal. My lucky number.
- rGRogério GomesThe origin of it all. That part never changed.
Then came ENTERPRISE.
ENTERPRISE
To me, it doesn't just mean a company. It also means initiative: the willingness to take on challenges and turn ideas into real projects.
The identity then gained a new symbol: the shield.
I've always identified with Viking and Spartan imagery — not for the warrior figure itself, but for what it represents to me:
Fight.Persistence.Loyalty.
The shield became a visual representation of those principles and joined the x7rG ENTERPRISE identity.
The identity evolved.The origin stayed the same.
Rogério Gomes.
Journey
Some companies that were part of my journey.
Experiences, teams, and challenges that also helped shape the professional I am today.
- 20º B Log Pqdt
- Altera & Ocyan FPSO
- Atento Brasil
- BFE
- Exército Brasileiro
- GAECO - PR
- Nexa
- Ministério Público do Paraná
- Odebrecht Engenharia & Construção
- Petrobras
- SONDA IT Services
- Spread Tecnologia
- Foresea
- EQS Engenharia
Education & Credentials
Professional growth is a continuous process. This is where I gather the studies, specializations and credentials that support the technical and creative work in this portfolio — documentation as evidence, not as a showcase.
Archive being expanded
This section presents a selection of my education and credentials. Additional diplomas, certifications and completed courses will be added progressively.
Universidade Salgado de Oliveira — UNIVERSO
Design Gráfico
Design
Some personal information has been blurred in this public copy to protect the holder's privacy.
Contact
x7rG ENTERPRISE
Good ideas deserve to leave the page.
If there's a project, a problem worth solving, or an idea worth building, we can start with a conversation.
Rogério GomesCreator of x7rG ENTERPRISE