Production-ready text-selection interaction for the web and WordPress, featuring a rabbit-guided highlight effect that appears during live text selection and resolves to the end of the selected text.
The White Rabbit Selection Effect is a front-end interaction pattern built for controlled editorial, portfolio, and experimental web experiences. When a user highlights text, a rabbit appears near the live selection state, follows the cursor while the drag-selection is still in progress, then performs a fast resolving hop to the end of the highlighted text and remains there until the selection is cleared or replaced.
This repository exists as a public, portfolio-grade implementation artifact. It is structured to show the full engineering surface of the project: source code, WordPress and Elementor integration examples, testing guidance, documentation, screenshots, governance, and release discipline. The goal is not novelty for its own sake. The goal is a restrained, production-aware interaction that demonstrates front-end control, performance awareness, integration clarity, and professional repository hygiene.
The current implementation does the following:
- keeps the rabbit hidden until a valid text selection exists
- follows the cursor while drag-based selection is actively happening
- resolves to the end of the selected text once selection is complete
- remains parked at the selection end while the selection stays active
- hides when the selection is cleared
- ignores form fields and code-like areas
- repositions on scroll and resize when the same selection remains active
- disables transition and idle animation under reduced-motion preferences in the current CSS layer
- live text-selection-aware UI behavior
- controlled end-of-selection resting state
- lightweight front-end footprint
- WordPress and Elementor Pro Custom Code integration path
- SVG or PNG rabbit asset support
- reduced-motion-aware styling model
- documentation-first repository structure
Most front-end interaction effects either feel generic or become disruptive once they leave the design mockup and enter a real site. This project was built to demonstrate a narrower and more disciplined approach.
The effect is intentionally scoped. It does not replace the cursor. It does not run everywhere by default. It does not try to dominate the page. Instead, it attaches itself to one specific user action, resolves quickly, and stays out of the way when it should not exist.
- editorial blog posts
- portfolio and lab-style project pages
- controlled front-end interaction demos
- WordPress sites using Elementor Pro Custom Code
- developer-facing repositories that need a concrete front-end implementation example
src/js/contains the canonical interaction logicsrc/css/contains the canonical styling layerassets/rabbit/contains the rabbit asset filesassets/social/contains repository presentation assetsintegrations/wordpress/elementor-custom-code/contains WordPress and Elementor integration examplesdocs/contains architecture, integration, testing, accessibility, performance, security, release, and roadmap guidancescreenshots/contains curated repository visualstests/contains manual testing support material and fixtures
The repository source files are the canonical project source.
The Elementor files are integration examples, not the primary development environment.
Use:
for the canonical source, and use:
integrations/wordpress/elementor-custom-code/example-snippet.jsintegrations/wordpress/elementor-custom-code/example-snippet.css
for the WordPress and Elementor deployment path.
See docs/installation.md.
See docs/integration-wordpress-elementor.md.
The rabbit is a decorative enhancement layer, not a required part of page use. It should never interfere with text selection, copying, form interaction, or code-copy workflows. The current CSS layer disables transition and idle animation under reduced-motion preferences.
See docs/accessibility-notes.md.
The implementation is designed to stay small and controlled. It uses a lightweight asset strategy, restrained DOM behavior, and explicit scope boundaries instead of sitewide default activation.
See docs/performance-notes.md.
This repository is public for review and portfolio presentation. It does not contain deployment credentials, environment secrets, or production-trusted automation. Public visibility is balanced with protected main-branch governance and a non-deploying repository posture.
See SECURITY.md and docs/security-model.md.
docs/architecture.mddocs/installation.mddocs/integration-wordpress-elementor.mddocs/error-codes.mddocs/security-model.mddocs/response-schema.mddocs/testing-guide.mddocs/accessibility-notes.mddocs/performance-notes.mddocs/release-process.mddocs/roadmap.md
Recommended screenshots include:
- repository cover state
- live selection tracking state
- resolved end-of-selection resting state
- WordPress and Elementor integration context
Planned refinements focus on behavior quality, configuration clarity, and integration polish rather than feature sprawl.
See docs/roadmap.md.
See LICENSE.
Maintained by Jeremy Burgos