Browser-Based LED Display Timeline Editor
Budget: $10 – $30 CAD
JavaScript Timeline Editor for LED Display (Drag-and-Drop Cards)
Project Overview
I am building a small LED display system (64×32 pixels) and need a simple browser-based timeline editor built in JavaScript.
The goal is to create a drag-and-drop timeline interface where users can add different types of “cards,” rearrange them, edit their properties, and export the result as JSON.
This is a front-end only project. No database or backend logic is required. The output will be JSON that my existing Flask backend will process.
Core Requirements
Timeline Editor
The interface should include:
A card palette with buttons to add:
Color card
Image card
Text card
Transition card
A timeline area where:
Cards appear in sequence
Cards can be dragged to reorder
Cards can be deleted
Clicking a card opens its properties
A properties panel for editing the selected card.
An Export button that outputs the timeline as JSON.
Card Types and Properties
1) Color Card
Background color picker
Duration (milliseconds)
2) Image Card
Image upload or image reference field
Auto-resize later (handled by backend, not required in this task)
Fit mode:
Contain
Cover
Background color for letterboxing
Duration (milliseconds)
3) Text Card
Up to 4 lines of text
Max 25 characters per line
Font size selector:
Small
Medium
Large
Full
Text color
Duration (milliseconds)
No scrolling or animation required for text in this phase.
4) Transition Card
This represents a transition between two cards.
Properties:
Transition type:
Fade
Scroll up
Duration (milliseconds)
Smoothness (step count)
No visual rendering of the transition is required in this phase, only the data model.
Required Functionality
The user must be able to:
Add cards to the timeline
Reorder cards using drag-and-drop
Delete cards
Click a card to edit its properties
Export the timeline to JSON
JSON Output Format
Exact structure is flexible, but should resemble:
Json
Copy code
{
"width": 64,
"height": 32,
"loop": true,
"items": [
{
"type": "color",
"bgColor": "#000000",
"durationMs": 10000
},
{
"type": "text",
"lines": ["HELLO", "WORLD"],
"font": "medium",
"color": "#ffffff",
"durationMs": 8000
},
{
"type": "transition",
"transition": "fade",
"durationMs": 1000,
"steps": 10
}
]
}
You may propose a slightly different structure if it is cleaner.
Technical Requirements
Plain JavaScript, or a lightweight framework (Vue, React, or similar)
Must run in a browser
No backend required
Deliverable should be:
A single HTML page
Associated JS and CSS files
Code should be clean, readable, and commented
Deliverables
Working timeline editor with:
Drag-and-drop cards
Card editing panel
JSON export
Source code
Short README with:
How to open and run it
How to integrate into an existing site
Acceptance Criteria
Cards can be added, reordered, edited, and deleted.
JSON export reflects the exact timeline order and properties.
Works in a modern browser (Chrome, Edge, Firefox).
No console errors during normal use.
Nice-to-Have (Optional, not required)
If easy to include:
Live preview of current card
Frame count or duration summary
Project Type
Small, self-contained front-end tool
Fixed price preferred
Estimated size: small to medium task for an experienced JS developer
Project Overview
I am building a small LED display system (64×32 pixels) and need a simple browser-based timeline editor built in JavaScript.
The goal is to create a drag-and-drop timeline interface where users can add different types of “cards,” rearrange them, edit their properties, and export the result as JSON.
This is a front-end only project. No database or backend logic is required. The output will be JSON that my existing Flask backend will process.
Core Requirements
Timeline Editor
The interface should include:
A card palette with buttons to add:
Color card
Image card
Text card
Transition card
A timeline area where:
Cards appear in sequence
Cards can be dragged to reorder
Cards can be deleted
Clicking a card opens its properties
A properties panel for editing the selected card.
An Export button that outputs the timeline as JSON.
Card Types and Properties
1) Color Card
Background color picker
Duration (milliseconds)
2) Image Card
Image upload or image reference field
Auto-resize later (handled by backend, not required in this task)
Fit mode:
Contain
Cover
Background color for letterboxing
Duration (milliseconds)
3) Text Card
Up to 4 lines of text
Max 25 characters per line
Font size selector:
Small
Medium
Large
Full
Text color
Duration (milliseconds)
No scrolling or animation required for text in this phase.
4) Transition Card
This represents a transition between two cards.
Properties:
Transition type:
Fade
Scroll up
Duration (milliseconds)
Smoothness (step count)
No visual rendering of the transition is required in this phase, only the data model.
Required Functionality
The user must be able to:
Add cards to the timeline
Reorder cards using drag-and-drop
Delete cards
Click a card to edit its properties
Export the timeline to JSON
JSON Output Format
Exact structure is flexible, but should resemble:
Json
Copy code
{
"width": 64,
"height": 32,
"loop": true,
"items": [
{
"type": "color",
"bgColor": "#000000",
"durationMs": 10000
},
{
"type": "text",
"lines": ["HELLO", "WORLD"],
"font": "medium",
"color": "#ffffff",
"durationMs": 8000
},
{
"type": "transition",
"transition": "fade",
"durationMs": 1000,
"steps": 10
}
]
}
You may propose a slightly different structure if it is cleaner.
Technical Requirements
Plain JavaScript, or a lightweight framework (Vue, React, or similar)
Must run in a browser
No backend required
Deliverable should be:
A single HTML page
Associated JS and CSS files
Code should be clean, readable, and commented
Deliverables
Working timeline editor with:
Drag-and-drop cards
Card editing panel
JSON export
Source code
Short README with:
How to open and run it
How to integrate into an existing site
Acceptance Criteria
Cards can be added, reordered, edited, and deleted.
JSON export reflects the exact timeline order and properties.
Works in a modern browser (Chrome, Edge, Firefox).
No console errors during normal use.
Nice-to-Have (Optional, not required)
If easy to include:
Live preview of current card
Frame count or duration summary
Project Type
Small, self-contained front-end tool
Fixed price preferred
Estimated size: small to medium task for an experienced JS developer